Core Code
Core Code Modern Dev Handbook

Responsive Grid with Flexbox

Flexbox can also build responsive grid layouts.

Preview

Code

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

.item{
flex:1 1 150px;
background:#9333ea;
color:white;
padding:20px;
}
</style>

<div class="grid">
<div class="item">Card</div>
<div class="item">Card</div>
<div class="item">Card</div>
</div>

More RWD Grid View Examples (8)

example Basic Responsive Grid open example example Auto-fit Responsive Grid open example example Responsive Image Grid open example example Grid Breakpoint Layout open example example Responsive Dashboard Grid open example example Responsive Card Layout open example example Responsive Sidebar Grid open example example Responsive Product Grid open example