【CSS】place-items・place-content の使い方｜Grid・Flexbox で配置を一括指定する

Flexbox や Grid で要素を配置するとき、align-items と justify-items、あるいは align-content と justify-content をそれぞれ書くのは少し手間です。CSS にはこれらをまとめて1行で書ける place-items と place-content という一括指定プロパティ（ショートハンド）があります。この記事では、2つの違いと使い方を、実際に動かせるデモつきで解説します。

place-items と place-content の違い

名前が似ていて混同しやすいので、まず役割の違いをはっきりさせておきましょう。ポイントは「何を動かすか」です。place-items は一つひとつの項目（アイテム）を、それぞれの居場所（セル）の中でどう揃えるかを指定します。一方 place-content は、項目のまとまり全体を、コンテナに余ったスペースの中でどう配置するかを指定します。

どちらも値を2つ書くと「1つ目が縦方向（align＝ブロック方向）、2つ目が横方向（justify＝インライン方向）」の順になります。値を1つだけ書くと、縦横の両方に同じ値が適用されます。

place-items で各項目を揃える

place-items: center; と書くと、align-items: center; justify-items: center; をまとめて指定したことになり、各項目がそれぞれのセルの中央に置かれます。次のデモは Grid の各セルの中で項目を中央に揃えた例です。CSS タブの center を start や end に変えると、揃え位置が変わるのが分かります。

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 200px;
  border: 2px solid #007bff;
  border-radius: 8px;
  padding: 10px;

  /* 各セルの中で項目をどう置くか（align-items + justify-items） */
  place-items: center;
}

.item {
  background: #e7f1ff;
  border: 1px solid #007bff;
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: bold;
  color: #0a58ca;
}

このように、項目がセルより小さいときに「セルの中のどこに置くか」を決めるのが place-items です。値に縦横を別々に指定したいときは place-items: start center; のように2つ並べます（この場合は縦が start、横が center）。

place-content で全体を配置する

place-content は、グリッドのトラック（行・列のまとまり）全体を、コンテナに余ったスペースの中でどこに置くかを指定します。効果が出るのは、トラックの合計サイズがコンテナより小さく、余白があるときです。次のデモはトラックを固定サイズにして余白を作り、place-content: center; でまとまり全体を中央に寄せた例です。

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>

.grid {
  display: grid;
  /* トラックを固定幅・固定高にして、余白を作る */
  grid-template-columns: 60px 60px;
  grid-auto-rows: 50px;
  gap: 10px;
  height: 220px;
  border: 2px solid #007bff;
  border-radius: 8px;
  padding: 10px;

  /* 余ったスペースの中でトラック全体をどこに置くか
     （align-content + justify-content） */
  place-content: center;
}

.item {
  display: grid;
  place-items: center;
  background: #e7f1ff;
  border: 1px solid #007bff;
  border-radius: 6px;
  font-weight: bold;
  color: #0a58ca;
}

place-content の値を start、end、space-between などに変えると、まとまりの寄せ方や項目同士の間隔の分け方が変わります。space-between や space-around といった値が使えるのは、項目を「揃える」のではなく余白を「配分する」content 系ならではです。

Flexbox でも使える

これらのショートハンドは Grid 専用ではなく、Flexbox でも使えます。ただし注意点があり、Flexbox では justify-items と place-items が効きません（Flex アイテムの主軸方向の揃えは justify-content で行うため）。そのため Flexbox では place-content を使って一括指定するのが実用的です。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 200px;

  /* align-content + justify-content をまとめて指定 */
  place-content: center;
}

よく使う値のまとめ

2つのショートハンドで指定できる代表的な値を整理します。指定する値はもとになる align-* / justify-* プロパティと同じものです。

place-content が効かないとき

「place-content: center; を書いたのに中央に寄らない」というのはよくあるつまずきです。原因の多くは、配置を動かすための余白がないことにあります。

トラックがコンテナいっぱいに広がっている

列の幅を 1fr で指定していると、トラックがコンテナの幅いっぱいに広がり、余白が生まれません。余白がなければ place-content は動かしようがないため、効果が見えなくなります。全体を配置したいときは、トラックを固定幅にするなどして余白を作る必要があります。

コンテナに高さがない

縦方向（align-content 相当）を効かせたいのにコンテナに高さが指定されていないと、コンテナが中身の高さぴったりに縮み、やはり余白が生まれません。縦方向の配置を使いたいときは、コンテナに height や min-height を指定しておきましょう。

まとめ

place-items は align-items と justify-items を、place-content は align-content と justify-content をまとめて書けるショートハンドです。place-items は各項目をセルの中で揃え、place-content はまとまり全体を余白の中で配置する、という違いを押さえれば使い分けられます。値は「縦 横」の順で、1つだけ書けば縦横同じになります。place-content が効かないときは、余白があるか（トラック幅やコンテナの高さ）を確認してみてください。

参考ページ

• place-items – CSS: カスケーディングスタイルシート | MDN
• place-content – CSS: カスケーディングスタイルシート | MDN