CSS

A shortcut property to easily set how items are aligned vertically and horizontally inside a grid or flex container.

place-items

やさしいイメージ

place-items は、グリッドやフレックスボックスの中で、中身（子要素）をどこに置くかをまとめて決めるプロパティです。

「上下」と「左右」の位置を一気に設定できる、配置のショートカットのようなものです。

たとえば、中央にピタッと寄せたいときも、これ一つで完結します。

正確な説明

place-items は、

の２つをまとめて書けるショートハンド（省略記法）です。

値を１つだけ書くと、縦横どちらにも同じ値が適用されます。

値を２つ書くと、１つ目が縦方向（align-items）、２つ目が横方向（justify-items）になります。

よく使うパターン

中央にそろえる定番の書き方はこれです

CSS

.container {
    display: grid;
    place-items: center;
}

上のコードは次の２行とまったく同じ意味です：

CSS

align-items: center;
justify-items: center;

つまり、中央そろえをまとめて書ける便利な方法です。

ワンポイント

display: grid; または display: flex; で使えます。

place-items は 「子要素の並び位置」 に関わる設定。

それぞれの子の中の内容をそろえたいときは place-content を使います。