<section>
  <div class="box"></div>
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div> 
  <div class="box"></div>
  <div class="box"></div>
</section>

// CSS Grid
$column-min: 200px;
$column-max: 12fr;
$row-min: 200px;
$row-max: auto;
$grid-gap: 10px;

section {
  display: grid;
  grid-gap: $grid-gap/2;
  grid-template-columns: repeat(auto-fill, minmax($column-min, $column-max));
  grid-auto-rows: minmax($row-min, $row-max);
}

.box {
  display: block;
  background: grey;
}