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)