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

HTML

<h3>Ґрід: контейнер каже center, а плашки сперечаються</h3>
<div class="grid">
    <div>без justify-self</div>
    <div class="a">start</div>
    <div class="b">end</div>
    <div class="c">stretch</div>
</div>

<h3>Флексбокс: justify-self не діє</h3>
<div class="flex">
    <div>звичайний</div>
    <div class="z">justify-self: end</div>
</div>

<h3>Звичайний блок: працює тільки автовідступ</h3>
<div class="block">
    <div class="q">justify-self: center</div>
    <div class="w">margin-inline: auto</div>
</div>

CSS

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

.grid {
    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;
    justify-items: center;
}

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

.grid .a {
    justify-self: start;
}

.grid .b {
    justify-self: end;
}

.grid .c {
    justify-self: stretch;
}

.flex,
.block {
    width: 420px;
    margin-bottom: 16px;
    padding: 8px;
    border: 2px dashed #d64545;
    background: #fff4f4;
    font: 14px/1.4 system-ui, sans-serif;
}

.flex {
    display: flex;
    gap: 10px;
}

.flex div {
    padding: 6px 10px;
    border-radius: 4px;
    background: #d64545;
    color: #fff;
}

.block .q,
.block .w {
    width: 170px;
    padding: 6px 10px;
    border-radius: 4px;
    color: #fff;
}

.block .q {
    background: #d64545;
    justify-self: center;
}

.block .w {
    margin-top: 8px;
    margin-inline: auto;
    background: #3a9a4f;
}