Place Content ショートハンドプロパティ

最終更新：2026-09-13

place-content Place Content ショートハンドプロパティ

place-content は align-content と justify-content のショートハンドです。グリッドコンテナ上で、グリッド内容全体の領域がコンテナに対してどう整列するかを制御します。グリッドトラックの合計サイズがコンテナより小さい場合、このプロパティは残りの空間をどう分配するかを決定します。グリッド全体の中央揃えと分配の鍵となります。

カテゴリ
初期値	normal
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

place-content: <align-content> <justify-content>?;

⚙️ 値

値	タイプ	説明
`<align-content> / <justify-content>`	値	内容整列のショートハンド

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
place-content	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： place-content: center はグリッド全体をコンテナ内で水平垂直ともに中央揃えします。

ヒント： space-between、space-around、space-evenly などの値は、グリッドトラック間の空間の分配方法を制御します。

❓ よくある質問

Qplace-content はいつ実際に効果を発揮しますか？

Aグリッドトラックの合計サイズ（gap 含む）がコンテナより小さい場合にのみ効果があります。そのときブラウザは place-content の値に従って残りの空間を整列・分配します。トラックが fr 単位で伸縮してコンテナを埋めている場合、あるいはコンテナが内容でサイズ決定され余白がない場合、このプロパティは見た目に効果がありません。機能させるには、トラックを固定値または minmax でサイズ指定し、コンテナに明確な幅と高さを与えます。

Qplace-content と place-items のどちらを使うべきですか？

A両者は異なる層で機能し、よく併用されます。place-content はグリッド内容全体の領域をコンテナ内に配置し、「グリッドがコンテナより小さい、どうレイアウトするか」に答えます。place-items は各グリッドアイテムを自分のセル内で整列させ、「各セル内でアイテムをどう配置するか」に答えます。グループを中央揃えするなら place-content、アイテムを中央揃えするなら place-items です。

Qなぜ place-content: center がグリッドで効かないことがあるのですか？

A最も一般的な理由は、グリッドがコンテナを埋めていることです。fr でサイズ指定されたトラックは残りの空間をすべて自動的に吸収するため、place-content が作用する余白がありません。もう一つの理由は、コンテナの高さが内容から来ており余白がないことです。place-content: center でグリッド全体を中央揃えするには、トラックを固定値または minmax でサイズ指定し、コンテナに明示的な寸法を与えます。