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