Four Card Feature

Your solution looks a lot like the provided design, well done! :). To answer your question, you can use grids.

Think of a grid like a 2D matrix where you can choose how many positions of the matrix your item will use.

As an example, I did this in my solution:

.card-container { display: grid; place-content: center; grid-template-columns: repeat(3, 1fr); /* 3 equal columns / grid-template-rows: auto auto; / 2 auto rows / gap: 10px; / space between grid elements */ }

.card-container-item1 { grid-column: 1; grid-row: 1 / span 2; }

.card-container-item2 { grid-column: 2; grid-row: 1; }

.card-container-item3 { grid-column: 2; grid-row: 2; }

.card-container-item4 { grid-column: 3; grid-row: 1 / span 2; }