<ul class="grid">
  <li class="item"><a href="#">item 01</a></li>
  <li class="item"><a href="#">item 02</a></li>
  <li class="item"><a href="#">item 03</a></li>
  <li class="item"><a href="#">item 04</a></li>
  <li class="item"><a href="#">item 05</a></li>
  <li class="item"><a href="#">item 06</a></li>
  <li class="item"><a href="#">item 07</a></li>
  <li class="item"><a href="#">item 08</a></li>
  <li class="item"><a href="#">item 09</a></li>
  <li class="item"><a href="#">item 10</a></li>
  <li class="item"><a href="#">item 11</a></li>
</ul>

ul {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  grid-gap: 14px;
}






/* Irrelevant for demo */

.item {
  padding: 0;
}

a {
  display: block;
  color: #FFFFFF;
  padding: 10px;
  border-radius: inherit;
}