<ul class="grid list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
.grid {
--cols: 3;
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(Max(calc(100% / var(--cols, 1)), 250px), 1fr)
);
}
.list {
padding: 0;
list-style: none;
li {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
background-color: tomato;
color: white;
border: 1px solid white;
font-family: sans-serif;
font-weight: 600;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.