<h2>auto-fill</h2>
<div class="grid-container container-fill">
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
</div>

<h2>auto-fit</h2>
<div class="grid-container container-fit">
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
</div>
body {
  padding: 2em;
}

.grid-container {
    display: grid;
    grid-gap: 1rem;
  
}

.container-fill {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.container-fit {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.grid-element {
    background-color: lightgreen;
    border-radius: 5px;
    height: 120px;
    width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.