CSS justify-items — вирівнювання елементів ґріда по горизонталі

HTML

<h3>justify-items: stretch — так поводиться й типове normal</h3>
<div class="demo stretch"><div>перший</div><div>другий</div></div>

<h3>justify-items: start</h3>
<div class="demo start"><div>перший</div><div>другий</div></div>

<h3>justify-items: center</h3>
<div class="demo center"><div>перший</div><div>другий</div></div>

<h3>justify-items: end</h3>
<div class="demo end"><div>перший</div><div>другий</div></div>

<h3>display: flex і той самий justify-items: center</h3>
<div class="demo flex"><div>перший</div><div>другий</div></div>
<p class="note">Нічого не змінилося: у флексбоксі властивість не діє взагалі.</p>

<h3>display: flex і justify-content: center — ось що працює у флексі</h3>
<div class="demo flex flex-fix"><div>перший</div><div>другий</div></div>

CSS

h3 {
    margin: 0 0 5px;
    font: 600 14px system-ui, sans-serif;
}

.demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 420px;
    margin-bottom: 16px;
    padding: 8px;
    border: 2px solid #b9c6d8;
    background: #f6f9ff;
    font: 14px/1.4 system-ui, sans-serif;
}

.demo div {
    padding: 6px 10px;
    border-radius: 4px;
    background: #2f6fd0;
    color: #fff;
}

.stretch {
    justify-items: stretch;
}

.start {
    justify-items: start;
}

.center {
    justify-items: center;
}

.end {
    justify-items: end;
}

.flex {
    display: flex;
    border-color: #d64545;
    background: #fff4f4;
    justify-items: center;
}

.flex div {
    background: #d64545;
}

.flex-fix {
    justify-content: center;
}

.note {
    margin: 0 0 16px;
    max-width: 420px;
    color: #5a6472;
    font: 13px/1.4 system-ui, sans-serif;
}