JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Row1</li>
  <li>Row2</li>
  <li>Row3</li>
  <li>Row4</li>
  <li>Row5</li>
  <li>Row6</li>
  <li>Row7</li>
  <li>Row8</li>
  <li>Row9</li>
  <li>Row10</li>
  <li>Row11</li>
  <li>Row12</li>
  <li>Row13</li>
  <li>Row14</li>
</ul>

CSS

ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 150px;
}

li {
  flex: 0 1 20%;
}

@media(max-width: 768px) {
  li {
    flex: 0 1 13%;
  }
}

@media(max-width: 480px) {
 ul {
   height: auto;
 }
}