<main>
  <div class="wrapper">
    <article class="flow">
      <h1><code>auto-fill</code> vs <code>auto-fit</code></h1>
      <figure class="callout">
        <p>In this example there will be as many tracks as will fit into the container with a minimum size of 100px.</p>
        <p><code>grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));</code></p>
      <p>Change between auto-fill and auto-fit keywords to see the difference when our first row is not filled with items.</p>
      </figure>
      <div class="controls">
        <label>
          Choose column size
          <select id="switcher">
            <option value="auto-fill">auto-fill</option>
            <option value="auto-fit">auto-fit</option>
          </select>
        </label>
      </div>
      <div class="container" id="container">
        <div class="box">Item one</div>
        <div class="box">Item two</div>
      </div>
    </article>
  </div>
</main>

:root {
  --var-repeat: auto-fill;
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--var-repeat), minmax(100px, 1fr));
  grid-template-rows: 200px auto;
  gap: 10px;
  background-color: var(--color-stroke);
  padding: 1em;
  max-width: 70rem;
}

const switcher = document.getElementById("switcher");
const root = document.documentElement;

switcher.addEventListener("change", function (evt) {
  root.style.setProperty("--var-repeat", evt.target.value);
});