Core Code
Core Code Modern Dev Handbook

Responsive Card Grid

Cards automatically wrap and resize.

Preview

Code

<style>
.cards{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.card{
flex:1 1 220px;
background:#f3f4f6;
padding:20px;
border:1px solid #ddd;
}
</style>

<div class="cards">
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
</div>

More Flex Responsive Examples (8)

example Flex Wrap Layout open example example Flexible Basis Cards open example example Responsive Navbar open example example Responsive Columns open example example Flex Gap Layout open example example Breakpoint Layout open example example Responsive Image Gallery open example example Responsive Sidebar Layout open example