<h1>Flat table</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
body {
margin: 8px;
}
ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-auto-rows: 50px;
line-height: 50px;
text-align: center;
padding: 0;
counter-reset: listCounter;
resize: horizontal;
overflow: auto;
gap: 1px;
border: 1px solid;
}
li {
outline: 1px solid;
counter-increment: listCounter;
&::after {
content: counter(listCounter);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.