Break up list into columns using CSS grid

The best modern solution to breaking up a list

by Max Poshusta

HTML

<ul class="grid-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

CSS

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}