JSFiddle - React, Tailwind, and code Playground

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>

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%;
}