GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Card layout

HTML

<div class="card-layout">
<!-- A card with given width -->
<div class="card-layout__item">...</div>

<!-- Repeat other cards -->
...
</div>

CSS

.card-layout {
display: flex;

/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;

margin-left: -0.25rem;
margin-right: -0.25rem;
}

.card-layout__item {
/* There will be 3 cards per row */
flex-basis: 33.33333%;

padding-left: 0.25rem;
padding-right: 0.25rem;
}
Demo
Follow me on and to get more useful contents.