<input type="radio" name="repeat" class="auto-fit" id="auto-fit" checked> <label for="auto-fit">auto-fit</label>
<input type="radio" name="repeat" class="auto-fill" id="auto-fill"> <label for="auto-fill">auto-fill</label>

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin-top: 1em;
}

[for="auto-fit"] {
  margin-right: 1em;
}
.auto-fill:checked ~ .grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.item {
  height: 120px;
  background: #faa;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.