responsive card grid layout
<!-- CSS is mentioned as style -->
<style>
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
.cards {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
@media (min-width: 600px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
</style>
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
<!-- Hope it helps -->