レイアウト
place-self
place-self は、align-self（縦の位置）と justify-self（横の位置）をまとめて書くショートハンドです。グリッドの項目 1 つに書いて、その項目だけをマスの中で動かします。
構文
<'align-self'> <'justify-self'>?プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: grid;
grid-template-columns: 1fr 1fr;
}
.box > :nth-child(2) {
place-self: center;
}コントロール
align-selfcenter
safe / unsafe (align-self)項目が箱からはみ出すときだけ効きます（このプレビューでは、はみ出しません）
justify-selfcenter
safe / unsafe (justify-self)項目が箱からはみ出すときだけ効きます（このプレビューでは、はみ出しません）
1234
解説
値の書き方
align-self の値、justify-self の値の順にスペースで区切って書きます（place-self: end center）。1 つだけ書くと、両方に同じ値が使われます。使える値はそれぞれのプロパティと同じで、safe center や last baseline のような 2 語の値も書けます。初期値は auto で、箱の place-items（align-items と justify-items）に従います。
このページのプレビューは、補助の宣言で display: grid と grid-template-columns: 1fr 1fr にして、2 列のマスに 4 つの項目を入れ、2 番目の項目だけに place-self を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。ほかの項目はマスいっぱいに広がったままで、縁取りした 2 の項目だけがマスの中で縦にも横にも動きます。
place-items との関係
箱に place-items を書くと、中の項目すべての位置がまとめて決まります。1 つの項目だけ違う位置にしたいときに、その項目に place-self を書きます。
フレックスボックスでは
フレックスボックスでは justify-self が無視されるので、効くのは 1 つ目の値（align-self）だけです。