<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: hidden;
  
  position: relative;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

li {
  border: 1px solid;
  margin: 0 -1px -1px 0;
  counter-increment: listCounter;
  
  &::after {
    content: counter(listCounter);
  }
}