<div class="grid">
<div class="item">25%</div>
<div class="item">25%</div>
<div class="item">25%</div>
  <div class="item">25%</div>
</div>


  <div class="grid2">
 <div class="item">1fr</div>
<div class="item">1fr</div>
<div class="item">1fr</div>
    <div class="item">1fr</div>
  </div>

body {
  margin: 0;
  color: white;
  font-size: 25px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 10px;
  grid-template-rows: 100px;
  margin: 0;
  
}

.grid .item {
  background-color: red;
}
.grid2 .item {
  background-color: green;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px;
  grid-column-gap: 10px;
  margin-top: 20px;
}