CSS辞書

place-items

レイアウト・配置

align-itemsとjustify-itemsを一括で設定するショートハンドプロパティです。Grid/Flexboxで中央配置が簡単になります。

構文

Syntax
place-items: <align-items> <justify-items>

Tailwindでは

place-items-centerplace-items: center
place-items-startplace-items: start
place-items-stretchplace-items: stretch

コード例

1

.grid-container { display: grid; place-items: center; }
実行結果
place-items: center - 水平・垂直中央配置
Item 1
Item 2
Item 3
💡 各グリッドセル内でアイテムが中央配置される

グリッドアイテムを中央配置

2

place-items: start end;
実行結果
place-items: start end - 垂直方向は上、水平方向は右
Item 1
Item 2
💡 align-items: start + justify-items: end の組み合わせ

垂直方向は開始、水平方向は終端に配置

💡 TIPS

1つの値で両方向、2つの値で個別指定。中央配置の最短記法。

🤖 AIがよく間違えるポイント

place-items: centerはgridの完全中央寄せ最短コード(align-items + justify-itemsの一括指定)ですが、AIはこれをflexコンテナに書くことがあります。flexにはjustify-itemsが存在しないため半分しか効きません(flexならalign-items + justify-content)。2値指定の順序はalign→justifyです。

💬 AIへの頼み方

display: grid; place-items: center の1行中央寄せと、flexでの中央寄せの使い分けを説明して実装して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
59+
Firefox
45+
Safari
11+
Edge
79+