初心者必見！CSSのplace-itemsとは？1行で中央配置ができる便利プロパティ

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSS Gridレイアウトを使っていると「縦横中央に揃える」や「上下左右に自由にアイテムを配置したい」という場面がありますよね。

そんなときに活躍するのが、place-itemsというプロパティです！

このプロパティは、「align-items」＋「justify-items」を1行で書ける便利なショートハンド。

初心者の方でもすぐに使えるように、使い方と実例を丁寧にご紹介します！

place-itemsとは？

place-itemsは、CSS Gridのショートハンドプロパティで、以下の2つのプロパティを1つにまとめて書くことができます。

つまり、これまでは次のように2行書いていたものが…

.grid-container {
  display: grid;
  align-items: center;
  justify-items: center;
}

1行でこう書けます

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

コードがスッキリして、読みやすさ＆保守性アップに貢献してくれます。

使い方の基本

place-itemsでは、1つまたは2つの値を指定できます。

place-items: [縦方向] [横方向];

よく使う値

例えばplace-items: center start; とすると、縦方向は中央揃え、横方向は左寄せになります。

よくある使い方とサンプルコード

縦横中央揃えのレイアウト

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

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

要素を画面のど真ん中に配置できます！

横中央・縦上揃えのレイアウト

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

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

Flexboxとの違いに注意！

place-itemsはCSS Grid専用のプロパティなので、Flexboxでは使えません。

Flexboxで中央揃えをしたいときは以下のようにします：

display: flex;
align-items: center;
justify-content: center;

Flexboxにplace-itemsを書いても、無視されるだけなのでご注意を！

初心者がやりがちな間違いと注意点

place-items: center;

このように1つだけ指定すると、「縦も横もcenter」になります。

まとめ：1行でスッキリ書ける便利プロパティ

place-itemsは、CSS Gridでレイアウトを組む時にとても便利なプロパティです。特に「中央揃え」を頻繁に使う人は覚えておくとコードがグッと簡潔になります。

今後のレイアウト作業にぜひ活用してみてください！