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