JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <!--<div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>-->
</div>

CSS

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1rem;
}

.menu-item {
  background: red;
  height: 2rem;
}