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; font-size: 0;}

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