Responsive Card Grid

Preview

Code

<style>
.cards{
display:grid;
grid-template-columns:1fr;
gap:10px;
}

.card{
background:#f3f4f6;
padding:20px;
border:1px solid #ddd;
}

@media (min-width:700px){
.cards{
grid-template-columns:1fr 1fr;
}
}

@media (min-width:1000px){
.cards{
grid-template-columns:1fr 1fr 1fr;
}
}
</style>

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

More RWD Media Queries Examples (8)

Basic Media Query Mobile First Breakpoint Grid Breakpoint Layout Responsive Typography Responsive Navbar Responsive Sidebar Layout Responsive Images Responsive Container Width