TailwindCSS grid-cols テクニック三選｜効かない原因と解決策

TailwindCSS grid-cols が効かない、思い通りにならない…そんな経験はありませんか？この記事では、grid-cols でよくある3つの躓きポイントと解決策を実例付きで解説します。

この問題、見覚えありませんか？

TailwindCSS grid-cols を使ってグリッドレイアウトを作ろうとしたのに、要素が横に並ばない…。

「grid-cols-3 を指定したのに、なぜか縦に並んだまま…」

この記事では、こうした grid-cols の躓きポイントを3つ紹介し、それぞれの解決策を解説します。

---

【体験談】私が grid-cols で苦戦した話

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

私が grid-cols で躓いたのは、余白の調整でした。

カード間の余白やカード両端の余白を調整しようとしたのですが、思うようにレイアウトが更新されず、何度も試行錯誤しました。

その結果、予定していた時間の何倍もかかってしまいました。

たくさん時間をかけたのに、自分が期待するクオリティを出すことができず、がっかりした記憶が強烈に残っています。結局、有識者の方に直してもらい、残念な気持ちになりました。

この記事を読んでいる方には、同じような思いをしてほしくありません。それが、この記事を書いたきっかけです。

---

テクニック三選

テクニック1: grid 忘れで横並びにならない

誤解シナリオ

読者Aさんは「3つの要素を横に並べたい」と考えました。

1. 公式ドキュメント（https://tailwindcss.com/docs/grid-template-columns）で grid-cols-3 を見つける
2. 「これだ！」と思い、親要素に grid-cols-3 を適用
3. 「あれ？縦に並んだまま…」と困惑

NGパターン

<div class="grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded">Item 1</div>
  <div class="bg-white p-4 rounded">Item 2</div>
  <div class="bg-white p-4 rounded">Item 3</div>
</div>

OKパターン

<div class="grid grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded">Item 1</div>
  <div class="bg-white p-4 rounded">Item 2</div>
  <div class="bg-white p-4 rounded">Item 3</div>
</div>

解説

grid-cols-3 は「列数を3に設定する」だけのクラスです。グリッドレイアウトを有効にするには、まず grid クラスで display: grid を適用する必要があります。

grid-cols-* 単体では何も起きません。

ポイント

要素をグリッドで並べたいときは、grid と grid-cols-* をセットで使いましょう。

---

テクニック2: 長いコンテンツで列が伸びる

誤解シナリオ

読者Bさんは「3列均等のカードグリッドを作りたい」と考えました。

1. 公式ドキュメント（https://tailwindcss.com/docs/grid-template-columns）で grid-cols-3 を見つける
2. カード内に長いURLを表示したら、その列だけ伸びてしまう
3. 「あれ？均等3列のはずなのに…」と困惑

NGパターン

<div class="grid grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded">Short</div>
  <div class="bg-white p-4 rounded">https://example.com/very/long/path/to/resource/that/breaks/layout</div>
  <div class="bg-white p-4 rounded">Short</div>
</div>

OKパターン

<div class="grid grid-cols-3 gap-4">
  <div class="min-w-0 bg-white p-4 rounded">Short</div>
  <div class="min-w-0 bg-white p-4 rounded truncate">https://example.com/very/long/path/to/resource/that/breaks/layout</div>
  <div class="min-w-0 bg-white p-4 rounded">Short</div>
</div>

解説

grid-cols-3 の 1fr は「残りの空間を等分」しますが、最小幅はコンテンツ幅になります。長いURLのような折り返せない文字列があると、その列だけ最小幅が大きくなり、均等になりません。

min-w-0 を指定すると最小幅が0になり、グリッドが均等に分割されます。truncate を追加すれば、長いテキストを省略できます。

ポイント

グリッドで長いコンテンツがはみ出すときは、子要素に min-w-0 を追加しましょう。

---

テクニック3: カード幅を固定したいときの正しい方法

誤解シナリオ

読者Cさんは「カード幅を200pxに固定して並べたい」と考えました。

1. 公式ドキュメント（https://tailwindcss.com/docs/grid-template-columns）で grid-cols-3 を見つける
2. 列数は grid-cols-3 で、幅は子要素に w-[200px] で指定しようとする
3. 「あれ？カード間に意図しない余白ができる…」と困惑

NGパターン

<div class="grid grid-cols-3 gap-4">
  <div class="w-[200px] bg-white p-4 rounded">Card 1</div>
  <div class="w-[200px] bg-white p-4 rounded">Card 2</div>
  <div class="w-[200px] bg-white p-4 rounded">Card 3</div>
</div>

OKパターン

<div class="grid grid-cols-[repeat(3,200px)] gap-4">
  <div class="bg-white p-4 rounded">Card 1</div>
  <div class="bg-white p-4 rounded">Card 2</div>
  <div class="bg-white p-4 rounded">Card 3</div>
</div>

解説

grid-cols-3 は各列を 1fr（親の幅を3等分）で分割します。子要素に w-[200px] を指定しても、グリッドの列幅は変わりません。結果、広い列の中に200pxのカードが配置され、意図しない余白が生まれます。

カード幅を固定したい場合は、グリッドの列幅自体を固定しましょう。grid-cols-[repeat(3,200px)] で「200px幅の列を3つ」と指定できます。

ポイント

グリッドでカード幅を固定したいときは、子要素ではなく grid-cols-[repeat(列数,幅)] で列幅を指定しましょう。

---

まとめ

TailwindCSS grid-cols テクニック三選を紹介しました。

• テクニック1: grid と grid-cols-* はセットで使う
• テクニック2: 長いコンテンツには min-w-0 を追加
• テクニック3: カード幅を固定するなら grid-cols-[repeat(列数,幅)]

grid-cols は便利なクラスですが、細かい挙動を知らないと思わぬところで躓きます。この記事が、同じような悩みを持つ方の助けになれば嬉しいです。

また別の記事でお会いしましょう。

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

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

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

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

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

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

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

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