JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
            <div class="box 1 a">AAAA</div>            
            <div class="box 1 a">AAAA</div>            
            <div class="box 1 a">AAAA</div>   
            <div class="box 1 a">AAAA</div>   
            <div class="box 1 a">AAAA</div>   
        </div>

CSS

.grid {
  margin-left: 5%;
  margin-right: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  grid-gap: 2.5% 2.5%;
  height : 200px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:red;
}