TailwindCSS grid-rows テクニック三選｜使いどころがわからない？実例で解説

TailwindCSS grid-rows の使いどころがわからない、公式を見ても理解できない…そんな経験はありませんか？この記事では、grid-rows の実践的な使い方を3つのテクニックで解説します。

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

TailwindCSS grid-rows を使って要素を縦に並べたいのに、なぜか横に並んでしまう…。

「上から下に並べたいのに、左から右に並んでしまう…」

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

---

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

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

私が grid-rows で躓いたのは、公式サイトの説明を見ても理解できなかったことでした。

「Using a custom value」のセクションを読んでも、grid-rows-[200px_minmax(900px,_1fr)_100px] という例を見ても、使いどころがまったくわかりませんでした。

結局、当時は解決できませんでした。後からいろいろ調べていくうちに、「こういう風に使えばいいのか」というところにたどり着き、今こうして記事を書いています。

この経験から、自分で調べて正解にたどり着こうとすると、めちゃくちゃ時間がかかることがよくわかりました。それに、公式を見てもすぐに理解できないことがあるんだということも。

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

---

テクニック三選

テクニック1: 上から下に並べたいのに左から右に並んでしまう

誤解シナリオ:

読者Aさんは「9つの要素を上から下に3行ずつ、3列に並べたい」と考えました。

1. 公式ドキュメント（https://tailwindcss.com/docs/grid-template-rows）で grid-rows-3 を見つける
2. 「縦に流れるように grid-flow-row を使えばいいはず」と思い適用
3. 「あれ？左から右に並んでしまう…」と困惑

期待した結果:

1  4  7
2  5  8
3  6  9

実際の結果:

1  2  3
4  5  6
7  8  9

NGパターン:

<div class="grid grid-flow-row grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  ...
  <div>9</div>
</div>

OKパターン:

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div>1</div>
  <div>2</div>
  ...
  <div>9</div>
</div>

解説:

grid-flow-row は「行方向（左→右）に流れる」という意味で、縦に流れるわけではありません。

縦方向に流れるようにするには grid-flow-col（列方向に流れる）を使い、grid-rows-3 で行数を指定します。

ポイント:

並べる方向に応じて使い分けましょう：

• 横方向（左→右）に流したい: grid-cols-* + grid-flow-row（デフォルト）
• 縦方向（上→下）に流したい: grid-rows-* + grid-flow-col

---

テクニック2: カードの高さを揃えたい → subgrid で解決

誤解シナリオ:

読者Bさんは「3つのカードを横に並べて、タイトル・本文・ボタンの位置を揃えたい」と考えました。

1. grid grid-cols-3 でカードを並べる
2. カードごとにコンテンツ量が違い、タイトルや本文の高さがバラバラになる
3. 「各カード間で揃えたいのに、どうすれば…」と困惑

NGパターン:

<div class="grid grid-cols-3 gap-4">
  <div class="flex flex-col gap-2">
    <h3>Title</h3>
    <p>Text</p>
    <button>Button</button>
  </div>
  <div class="flex flex-col gap-2">
    <h3>Long Long Long Long Title</h3>
    <p>Text</p>
    <button>Button</button>
  </div>
  <div class="flex flex-col gap-2">
    <h3>Title</h3>
    <p>Long long long long long long text</p>
    <button>Button</button>
  </div>
</div>

OKパターン:

<div class="grid grid-cols-3 grid-rows-[auto_1fr_auto] gap-4">
  <div class="row-span-3 grid grid-rows-subgrid gap-2">
    <h3>Title</h3>
    <p>Text</p>
    <button>Button</button>
  </div>
  <div class="row-span-3 grid grid-rows-subgrid gap-2">
    <h3>Long Long Long Long Title</h3>
    <p>Text</p>
    <button>Button</button>
  </div>
  <div class="row-span-3 grid grid-rows-subgrid gap-2">
    <h3>Title</h3>
    <p>Long long long long long long text</p>
    <button>Button</button>
  </div>
</div>

解説:

通常のグリッドでは、各カードは独立したボックスなので、カード間でタイトルや本文の位置が揃いません。

grid-rows-subgrid を使うと、子要素（カード）が親グリッドの行ラインを継承します。親で grid-rows-[auto_1fr_auto] と定義すれば、すべてのカードでタイトル・本文・ボタンの位置が揃います。

ポイント:

カード間で要素の位置を揃えたいときは、親に行定義を置き、各カードに grid-rows-subgrid を使いましょう。

---

テクニック3: Using a custom value の使いどころ

誤解シナリオ:

読者Cさんは「grid-rows をもっと柔軟に使いたい」と考えました。

1. 公式ドキュメント（https://tailwindcss.com/docs/grid-template-rows）の「Using a custom value」を読む
2. grid-rows-[200px_minmax(900px,_1fr)_100px] という例を見ても、使いどころがわからない
3. 「これ、いつ使うの…？」と困惑

解説:

典型的なユースケースは 「ヘッダー・メイン・フッターのレイアウト」 です。

┌─────────────────────┐
│ Header (60px固定)   │
├─────────────────────┤
│                     │
│ Main (残り全部)      │
│                     │
├─────────────────────┤
│ Footer (60px固定)   │
└─────────────────────┘

• ヘッダー: 高さを固定したい（60px）
• メイン: 残りのスペース全部使いたい（1fr）
• フッター: 高さを固定したい（60px）

これを grid-rows-[60px_1fr_60px] で実現できます。

NGパターン:

<div class="grid grid-rows-3 h-[400px] gap-2">
  <div>Header</div>
  <div>Main</div>
  <div>Footer</div>
</div>

OKパターン:

<div class="grid grid-rows-[60px_1fr_60px] h-[400px] gap-2">
  <div>Header</div>
  <div>Main</div>
  <div>Footer</div>
</div>

ポイント:

カスタム値は「この行は固定、この行は可変」のように、行ごとに高さを細かく指定したいときに使いましょう。

---

まとめ

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

• テクニック1: 縦に並べるなら grid-rows-* + grid-flow-col
• テクニック2: カード間で揃えるなら grid-rows-subgrid
• テクニック3: 行ごとに高さを指定するならカスタム値 grid-rows-[60px_1fr_60px]

grid-rows は grid-cols に比べて使う場面が限られますが、知っておくと便利なクラスです。この記事が、同じように「使いどころがわからない」と悩んでいた方の助けになれば嬉しいです。

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

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

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

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

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

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

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

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

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