レイアウト
justify-items
justify-items は、グリッドの項目を、それぞれのマスの中で行の向き（横書きなら左右）のどこに置くかを、まとめて指定します。
構文
normal | stretch | <baseline-position>
| <overflow-position>? [ <self-position> | left | right ]
| legacy | legacy && [ left | right | center ] | anchor-centerプレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}コントロール
justify-itemscenter
safe / unsafe項目が箱からはみ出すときだけ効きます（このプレビューでは、はみ出しません）
1234
解説
値の書き方
normal：初期値です。グリッドの項目では、幅を決めていなければstretchと同じになります。stretch：幅を決めていない項目を、マスの幅いっぱいに広げます。start・end・center：マスの行の始まり・終わり・中央に寄せます。項目は中身の幅に縮みます。left・right：文字の向きにかかわらず、マスの左・右に寄せます。self-start・self-end：項目自身の文字の向きで、始まり・終わりに寄せます。baseline・last baseline：同じ列の項目どうしを、文字の基準線でそろえます。横書きの箱の中の横書きの項目には左右の向きの基準線が無いので、baselineはstartとほぼ同じ位置になります。anchor-center：アンカー位置指定で置いた要素を、アンカーの中央に合わせます。
center などの前に safe を付けると、項目がマスより広いときに左（始まり）側がはみ出して見えなくならないように、start に切り替えます。unsafe は、はみ出してもそのまま寄せます。
justify-self との関係
justify-items は箱に書いて、中の項目すべての justify-self の初期値（auto）を決めます。1 つの項目だけ違う位置にしたいときは、その項目に justify-self を書きます。縦の位置は align-items で決めます。place-items: center と書くと、縦と横をまとめて中央にできます。
このページのプレビューは、補助の宣言で display: grid と grid-template-columns: 1fr 1fr にして、2 列のマスに 4 つの項目を入れています。
効かない場面
- フレックスボックスでは無視されます。横の並べ方は
justify-contentで決めます。 - ブロックの箱（
display: block）の子にも効く仕様ですが、今のところ対応しているのは Chrome・Edge（130 以降）だけです。
このページで扱わない書き方
legacy は、HTML の align 属性のように、位置を子孫の要素にも受け継がせるための値です（legacy center など）。flex-start・flex-end も書けますが、グリッドでは start・end と同じです。どちらもこのページのコントロールでは扱っていませんが、コードには書けます。