<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);
});
This Pen doesn't use any external JavaScript resources.