JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="collection-grid">

  <li>
    <a href="http://example.com/alice">
      Alice
    </a>
  </li>

  <li>
    <a href="http://example.com/bob">
      Bob
    </a>
  </li>

  <li>
    <a href="http://example.com/carol">
      Carol
    </a>
  </li>

  <li>
    <a href="http://example.com/test">
      Test
    </a>
  </li>

  <li>
    <a href="http://example.com/test2">
      Test2
    </a>
  </li>

  <li>
    <a href="http://example.com/test3">
      Test3
    </a>
  </li>

  <li>
    <a href="http://example.com/test4">
      Test4
    </a>
  </li>

  <li>
    <a href="http://example.com/test5">
      Test5
    </a>
  </li>

  <li>
    <a href="http://example.com/test6">
      Test6
    </a>
  </li>
  <li>
    <a href="http://example.com/alice">
      Alice
    </a>
  </li>

  <li>
    <a href="http://example.com/bob">
      Bob
    </a>
  </li>

  <li>
    <a href="http://example.com/carol">
      Carol
    </a>
  </li>
  <li>
    <a href="http://example.com/alice">
      Alice
    </a>
  </li>

  <li>
    <a href="http://example.com/bob">
      Bob
    </a>
  </li>

  <li>
    <a href="http://example.com/carol">
      Carol
    </a>
  </li>
    <li>
    <a href="http://example.com/alice">
      Alice
    </a>
  </li>

  <li>
    <a href="http://example.com/bob">
      Bob
    </a>
  </li>

  <li>
    <a href="http://example.com/carol">
      Carol
    </a>
  </li>
    <li>
    <a href="http://example.com/alice">
      Alice
    </a>
  </li>

  <li>
    <a href="http://example.com/bob">
      Bob
    </a>
  </li>

  <li>
    <a href="http://example.com/carol">
      Carol
    </a>
  </li>
</ul>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    const chunkConfig = [{
      items: 2,
      className: "col-6"
    }, {
      items: 4,
      className: "col-3"
    }, {
      items: 3,
      className: "col-4"
    }];
    const listItems = document.querySelectorAll("#collection-grid > li");
    for (let i = 0, chunkIndex = 0,...

CSS

ul#collection-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

ul#collection-grid>li {
  display: block;
  background-color: yellow;
  margin: -1px;
  border: 1px solid black;
  text-align: center;
}

ul#collection-grid>li.col-6 {
  width: 50%
}

ul#collection-grid>li.col-3 {
  width: 25%
}

ul#collection-grid>li.col-4 {
  width: 33.3333%
}