TailwindCSS place-items 完全攻略｜中央配置のつまずき3選を実例で解説

TailwindCSS place-items を含む place-* クラスでつまずきがちな3つのポイントを解説。Flex の癖で冗長になる中央配置、place-items と place-content の混同、個別アイテムの配置まで実例コードと画像付きで紹介します。

TailwindCSS place-items を使った中央配置、シンプルに書けていますか？「Flex の癖で justify-items + items の2クラスを書いている」「place-items と place-content の違いがあいまい」「特定の1つだけ別配置にしたいのに全部に効いてしまう」——これらは多くの開発者が知らずに通り過ぎてしまう落とし穴です。

この記事では、place-items / place-content / place-self の使い分けで見落としがちな3つのポイントを、NG/OK のコードと実際の表示画像を並べながら解説します。

「中央配置だから justify-items-center items-center の2クラスは必要」——そう思って書いていませんか？実はこれが今回の1つ目のテクニックの題材です。

私の体験談

その前に、私の体験談を紹介させてください。

私はこの記事を執筆するまで、place-items-center というクラスの存在を知りませんでした。

正直に告白すると、Grid のセル内で要素を中央配置したいとき、これまで grid justify-items-center items-center のように2クラス組み合わせて書いていました。Flexbox の justify-center items-center の癖がそのまま身についていたんです。

今回この記事を書くために調べて、「えっ、こんなのあるの？知らなかった」と素直に驚きました。今まで2クラスで書いていた中央配置が、place-items-center 1クラスで済む——記述量がシンプルに半分になります。

公式ドキュメントは Justify Items / Align Items / Place Items が別ページに分かれているため、Flex の感覚で Justify と Align を別々に覚えると、Place のショートハンドの存在に気付きにくい構成です。気づかず冗長な書き方を続けている方は、私以外にもいるんじゃないか——そう思ったのが、この記事を執筆するきっかけになりました。

同じように「いつもの書き方で動いてるけど、もしかしてもっと簡潔にできるのでは？」と感じている方の役に立てれば嬉しいです。

今回紹介する3つのテクニック

place-* クラス（place-items / place-content / place-self）まわりで開発者が躓きやすいポイントを、3つに絞って取り上げます。それぞれ「読者がやりがちな誤解 → NGコード → OKコード → 解説 → ポイント」の流れで進めます。コードはすべて Tailwind Play で再現できる形で示します。

テクニック1: 中央配置で justify-items + items を組み合わせて冗長になる

誤解シナリオ:

読者Aさんは、Grid のセル内のコンテンツ（アイコンやテキスト）を水平・垂直の両方で中央寄せしたいと思っています。

1. Flexbox での「中央寄せ」の経験から、justify-* + items-* の2軸セットで考える癖がある
2. 公式ドキュメント（Justify Items - Tailwind CSS、Align Items - Tailwind CSS）で justify-items-center と items-center を見つける
3. 「2つ組み合わせれば中央寄せできるな」と思い、grid justify-items-center items-center と記述
4. 動作はするが、もっと簡潔に書ける方法があるとは気付かない

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-2 bg-white p-6 rounded h-64 justify-items-center items-center">
    <div class="bg-slate-200 px-4 py-2">セル1</div>
    <div class="bg-slate-200 px-4 py-2">セル2</div>
    <div class="bg-slate-200 px-4 py-2">セル3</div>
  </div>
</div>

動作はしていますが、justify-items-center items-center の2クラス分の冗長さが残ります。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-2 bg-white p-6 rounded h-64 place-items-center">
    <div class="bg-slate-200 px-4 py-2">セル1</div>
    <div class="bg-slate-200 px-4 py-2">セル2</div>
    <div class="bg-slate-200 px-4 py-2">セル3</div>
  </div>
</div>

見た目は NG と全く同じですが、コードは place-items-center 1クラスに集約され、意図も「2軸まとめて中央配置」と明確になりました。

解説:

place-items-* は CSS の place-items プロパティに対応するショートハンドで、align-items（垂直軸）と justify-items（水平軸）を同時に指定します。両軸とも同じ値（例: center）にしたい場合、place-items-center 1つで済みます。

公式ドキュメントは「Justify Items」「Align Items」「Place Items」が別ページに分かれているため、最初に Justify と Align を見て「2つ書けばいいんだ」と理解すると、Place のショートハンドの存在を見落としやすい構成になっています。

特に Flexbox（justify-center items-center）の癖がある開発者は、Grid でも無意識に同じ書き方をしてしまいがちですが、Grid 専用の place-items-* を覚えると記述量が約半分になります。

ポイント:

Grid セル内のコンテンツを2軸まとめて配置したいときは、place-items-{center,start,end} を使いましょう。

テクニック2: place-items と place-content を混同して効かない

誤解シナリオ:

読者Bさんは、固定幅のカードを並べたGrid 全体を親要素の中央に固めて配置したいと思っています。

1. 各カードのサイズを固定にして、Grid を作成（例: grid-cols-[120px_120px]）
2. 親要素の方が大きいので、Grid 全体に余白が出る → 中央に配置したい
3. 公式ドキュメント（Place Items - Tailwind CSS）で place-items-center を見つける
4. 「place-items は『place（配置する）items（アイテムを）』だから、グリッド全体を中央配置するクラスだろう」と推察して適用
5. Grid 全体は親の左上のまま、何も変わらない…と困惑する

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-[120px_120px] gap-2 bg-white p-6 rounded h-64 w-full place-items-center">
    <div class="bg-slate-200 w-full p-2 text-center">A</div>
    <div class="bg-slate-200 w-full p-2 text-center">B</div>
    <div class="bg-slate-200 w-full p-2 text-center">C</div>
    <div class="bg-slate-200 w-full p-2 text-center">D</div>
  </div>
</div>

4枚のカードが親要素の左上に固まったままで、中央には配置されません。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-[120px_120px] gap-2 bg-white p-6 rounded h-64 w-full place-content-center">
    <div class="bg-slate-200 w-full p-2 text-center">A</div>
    <div class="bg-slate-200 w-full p-2 text-center">B</div>
    <div class="bg-slate-200 w-full p-2 text-center">C</div>
    <div class="bg-slate-200 w-full p-2 text-center">D</div>
  </div>
</div>

Grid 全体（4枚のカード）が親要素の中央に固まって配置されました。

解説:

place-items と place-content は名前が似ていますが、配置の対象が異なります。

• place-items-*: 各 Grid セル内のアイテム（中身）の配置を制御
• 例: セルが 120×60 で中身が 80×40 のとき、その中身をどこに置くか
• place-content-*: Grid 全体の塊を、親要素の中でどう配置するか
• 例: Grid 全体が 250×130 で親が 600×256 のとき、Grid をどこに置くか
• Grid のサイズが親より小さい場合にのみ意味を持つ

このテクニックでは、各列を [120px_120px] のような固定幅にしているため Grid 全体のサイズは親より小さくなり、その結果 place-content が機能する余白が生まれます。一方で grid-cols-3（=repeat(3, minmax(0, 1fr))）のように Grid が親いっぱいに広がる場合は、place-content を書いても余白がないため見た目に変化はありません。

公式ドキュメントは Place Items / Place Content / Place Self が別ページに分かれているため、最初に「Place Items」だけを読んで「これが配置の万能クラスだ」と思い込むと、Place Content の存在意義に気付きにくい構成です。

ポイント:

Grid 全体を親要素内で配置したいときは place-content-{center,start,end} を、各セル内のアイテムを配置したいときは place-items-{center,start,end} を使い分けましょう。

テクニック3: 個別アイテムを別配置にしたいのに親 place-items で全部に効いてしまう

誤解シナリオ:

読者Cさんは、3つのカードのうち「特定の1つだけ別の配置（例: 右下）」にしたいと思っています。

1. 公式ドキュメントで place-items-end を見つける
2. 「これで右下配置にできるな」と思い、親に place-items-end を適用
3. 確認すると、3つとも全部が右下に配置されてしまった
4. 「特定の1つだけ右下にしたいのに、全部に効いてしまう…どうやって個別指定するんだろう」と困る

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-2 bg-white p-6 rounded h-32 place-items-end">
    <div class="bg-slate-200 w-16 h-8 p-1 text-center text-sm">A</div>
    <div class="bg-slate-200 w-16 h-8 p-1 text-center text-sm">B</div>
    <div class="bg-slate-200 w-16 h-8 p-1 text-center text-sm">C</div>
  </div>
</div>

A・B・C 全部が各セルの右下に配置されてしまい、「C だけ右下」を実現できません。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-2 bg-white p-6 rounded h-32">
    <div class="bg-slate-200 w-16 h-8 p-1 text-center text-sm">A</div>
    <div class="bg-slate-200 w-16 h-8 p-1 text-center text-sm">B</div>
    <div class="bg-slate-200 w-16 h-8 p-1 text-center text-sm place-self-end">C</div>
  </div>
</div>

A と B はそれぞれの列の左上（デフォルト）に配置されたまま、C だけが3列目の右下に配置されました。

解説:

place-items-* は Grid コンテナ（親） に書くプロパティで、すべての子要素に共通で適用されます。一方、特定のアイテムだけ異なる配置にしたい場合は、そのアイテム自身に place-self-* を書きます。

place-self-* は親の place-items-* を上書きするため、「全体は左上、特定の1つだけ右下」のような個別制御が可能になります。Flexbox にも items-*（親）と self-*（子）の同じ二重構造があるため、Flex の経験がある開発者には理解しやすい対応関係です。

書く場所	クラス	役割
親（Grid コンテナ）	place-items-*	すべての子に一括で配置を指定
子（Grid アイテム）	place-self-*	その子だけの配置を上書き

公式ドキュメントは Place Items と Place Self が別ページに分かれており、初学者は Place Items だけを読んで「これで配置できる」と判断しがちです。Place Self の存在を知ると、ダッシュボードで「最後のカードだけ右寄せ（CTAボタン用）」のような細かいレイアウト調整が一気にやりやすくなります。

ポイント:

Grid の特定アイテムだけ別の配置にしたいときは、親の place-items-* ではなく、そのアイテムに place-self-* を書きましょう。

まとめ

TailwindCSS place-items / place-content / place-self の使い分けで躓きやすい3つのポイントを解説しました。

• テクニック1: 中央配置で justify-items + items の2クラスは不要、place-items-center 1クラスで済む
• テクニック2: place-items はセル内のアイテム配置、place-content はGrid 全体の配置 — 名前は似ていても役割が違う
• テクニック3: 特定アイテムだけ別配置にしたいときは、親の place-items ではなく子に place-self

place-* クラスは「親で全体指定（place-items/place-content） vs 子で個別上書き（place-self）」という二重構造を理解すると、Grid レイアウトの記述が一気にシンプルになります。Flexbox の癖で justify-* + items-* を組み合わせている方は、ぜひ place-* への置き換えを試してみてください。

それではまた、別の記事でお会いしましょう。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）