<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.