<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Extra space in the grid container</h1>
      <figure class="callout">
        <p>The <code>align-items</code> property distributes space in the block direction. The <code>justify-items</code> property in the inline direction.</p>
      </figure>
      <div class="controls">
        <label>
          Choose aligment
          <select id="switcher">
            <option value="stretch">stretch</option>
            <option value="start">start</option>
            <option value="end">end</option>
            <option value="center">center</option>
          </select>
        </label>
        <label>
          Choose justification
          <select id="switcher2">
            <option value="stretch">stretch</option>
            <option value="start">start</option>
            <option value="end">end</option>
            <option value="center">center</option>
          </select>
        </label>
      </div>
      <div class="container" id="container">
        <div class="box">Item one</div>
        <div class="box">Item two</div>
        <div class="box">Item three</div>
        <div class="box">Item four</div>
        <div class="box">Item five</div>
      </div>
    </article>
  </div>
</main>

/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

/* CSS files add styling rules to your content */
:root {
  --var-justify-items: 'start';
  --var-align-items: 'start';
}

body {
  font-family: system-ui,-apple-system,sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  align-items: var(--var-align-items);
  justify-items: var(--var-justify-items);
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 90px 100px;
  gap: 10px;
  background-color: #dadce0;
  padding: .5em;
  border-radius: 3px;
  max-inline-size: 600px;
  block-size: 520px;
}



.box:nth-child(1) {
  grid-row: 1 / 3;
  grid-column: 1;
}

.box:nth-child(3) {
  grid-row: 2;
  grid-column: 2 / -1;
}

.controls label {
      display: inline-grid;
    grid-template-columns: minmax(150px, max-content) 1fr;
    gap: 0 1rem;
    align-items: center;
}

let root = document.documentElement;
let switcher1= document.getElementById("switcher");
switcher1.addEventListener("change", function (evt) {
  root.style.setProperty('--var-align-items', evt.target.value);
});

let switcher2= document.getElementById("switcher2");
switcher2.addEventListener("change", function (evt) {
  root.style.setProperty('--var-justify-items', evt.target.value);
});