<ul class="list">
<li>card</li>
<li>card</li>
<li>card</li>
<li>card</li>
<li>card</li>
<li>card</li>
<li>card</li>
<li>card</li>
<li>card</li>
<li>card</li>
</ul>
.list {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
gap: 30px;
padding: 30px;
> li {
height: 100px;
display: grid;
place-items: center;
background-color: rgba(#00ff00, 0.2);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.