JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<div class="box"><span>item1</span></div>
  <div class="box"><span>item2</span></div>
  <div class="box"><span>item3</span></div>
  <div class="box"><span>item4</span></div>
  <div class="box"><span>item5</span></div>
  <div class="box"><span>item6</span></div>
  <div class="box"><span>item7</span></div>
  <div class="box"><span>item8</span></div>
  <div class="box"><span>item9</span></div>
  <div class="box"><span>item10</span></div>
  <div class="box"><span>item11</span></div>
</div>

CSS

.wrap { border: 2px solid; overflow: hidden; }

.box {
  float:left;
  width: 33.33%;

}
span { display:block; border: 1px solid blue; width:100%; max-width: 160px;  box-sizing: border-box; text-align: center; margin: 0 auto;  }