JSFiddle - React, Tailwind, and code Playground

by Kiwiupover

HTML

<h2>Three up</h2>
<ul class="block-grid three-up">
  <li><div>Item #1 (row #1 / column #1)</div></li>
  <li><div>Item #2 (row #1 / column #2)</div></li>
  <li><div>Item #3 (row #1 / column #3)</div></li>
  <li><div>Item #4 (row #2 / column #1)</div></li>
  <li><div>Item #5 (row #2 / column #2)</div></li>
  <li><div>Item #6 (row #2 / column #3)</div></li>
  <li><div>Item #7 (row #3 / column #1)</div></li>
</ul>

<h2>Five up</h2>
<ul class="block-grid five-up">
  <li><div>Item #1</div></li>
  <li><div>Item #2</div></li>
  <li><div>Item #3</div></li>
  <li><div>Item #4</div></li>
  <li><div>Item #5</div></li>
  <li><div>Item #6</div></li>
  <li><div>Item #7</div></li>
</ul>

CSS

li > div {
    background: gray;
    height: 40px;
    padding: 10px;
}
ul.block-grid {
   
   margin-left: -12px
   display: block;
   overflow: hidden;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
    
}
ul.block-grid > li {
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid.three-up > li {
   width: 33.33333%;
}
ul.block-grid.three-up > li:nth-of-type(3n+1) {
   clear: left;
}

ul.block-grid.five-up > li {
   width: 20%;
}
ul.block-grid.five-up > li:nth-of-type(5n+1) {
   clear: left;
}