<div class="grid">
<div class="grid__item card1">Card1</div>
<div class="grid__item card2">Card2</div>
<div class="grid__item card3">Card3</div>
<div class="grid__item card4">Card4</div>
<div class="grid__item card5">Card5</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
background: #eee;
}
.card1,
.card2,
.card3,
.card4,
.card5 {
width: 100%;
height: 300px;
box-shadow: 0 0 3px rgba(0,0,0,0.16);
background: #fff;
border-radius: 5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.