Card layout

<div class="cards">
<!-- A card with given width -->
<div class="cards__item">
...
</div>
<!-- Repeat other cards -->
...
</div>
.cards {
display: flex;
/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;
margin-left: -8px;
margin-right: -8px;
}
.cards__item {
/* There will be 4 cards per row */
flex-basis: 25%;
padding-left: 8px;
padding-right: 8px;
}

See also

Card

Masonry grid

Simple grid