TailwindCSS row-span｜行結合・効かない罠・全行跨ぎ 完全ガイド

TailwindCSS row-span は CSS Grid で要素を縦方向に複数行跨ぐためのユーティリティです。基本の行結合、grid-rows-N との N 不整合の罠、row-span-full で全行跨ぎを実例付きで解説します。

TailwindCSS row-span の使い分け、できていますか？「row-span-2 を書いたのに動かない」「サイドの数を増やしたらレイアウトが崩れた」「メインを常に全行跨ぎにしたいのに毎回数字を合わせるのが面倒」——これらは多くの開発者が row-span を使い始めた直後にハマる落とし穴です。

この記事では、TailwindCSS で row-span を使いこなす3つのテクニックを、NG/OK のコードと実際の表示画像を並べながら解説します。

「メイン記事+サイド3枚の非対称レイアウトを Tailwind で書きたいけれど、grid-cols-2 だけだとメインが目立たない」——そう感じた経験はありませんか？実はこれが今回の1つ目のテクニックの題材です。

私の体験談

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

今回この記事を執筆するにあたって、grid-rows 自体は経験があったのですが、row-span を本格的に使うのは初めてでした。

公式サイトの Grid Row Start / End ページを読んでみたのですが、最初から意図を読み取ることはできず、何度も試していくうちに、ようやく今回の記事に書いた内容ができるようになった という印象です。

同じように「公式 docs は読んだけれど、いまひとつ使いこなせない」と感じている方の役に立てれば嬉しいです。

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

TailwindCSS で row-span を扱うときに開発者が躓きやすいポイントを、3つに絞って取り上げます。それぞれ「読者がやりがちな誤解 → NGコード → OKコード → 解説 → ポイント」の流れで進めます。コードはすべて Tailwind Play で再現できる形で示します。

テクニック1: 基本の行結合（メイン+サイドの非対称レイアウト）

誤解シナリオ:

読者Aさんは、「メイン記事1枚（大）+ サイド3枚（小）」のブログのトップページ風レイアウトを Tailwind で作りたいと思っています。

1. 公式ドキュメント（Grid Row Start / End - Tailwind CSS）で row-span-<number> を見つける
2. ソースを見ると grid-row: span N / span N; と書いてある
3. ひとまず grid-cols-2 で4枚を並べる → 2行2列の均等配置になり、メインが他と同じ大きさで埋もれてしまう
4. 「メインだけ大きくしたい…」と困惑
5. 公式 docs の row-span-N を改めて見て試す → メインに row-span-3 を適用、親に grid-rows-3 を指定
6. → メインが縦3行分に拡大、サイド3枚が右側に縦並びで非対称レイアウト完成

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 gap-4 h-96">
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">メイン記事</h3>
      <p class="text-sm">注目してほしいけど、サイドと同じ大きさで埋もれてしまう...</p>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド1</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド2</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド3</h3>
    </article>
  </div>
</div>

grid-cols-2 だけだと4枚が 2行 × 2列 で均等に並び、メインが他と同じ大きさで目立ちません。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 grid-rows-3 gap-4 h-96">
    <article class="bg-white rounded-lg p-4 row-span-3">
      <h3 class="font-bold mb-2">メイン記事</h3>
      <p class="text-sm">縦3行分の高さでサイドより大きく目立つ！</p>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド1</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド2</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド3</h3>
    </article>
  </div>
</div>

メインが左1列縦3行を占有、サイド3枚が右1列に縦並び。ブログのトップページや雑誌風レイアウトでよく見る非対称構成になりました。

解説:

row-span-N は CSS の grid-row: span N / span N; を生成し、要素を 縦方向に N 行分 に拡大します。残りの要素は auto-placement（grid-auto-flow: row がデフォルト）により、空いているセルに自動配置されます。

レイアウトを意図通りに機能させるには、親 grid の構造設定が鍵になります。

親の指定	効果
grid-cols-2 のみ	列だけ2列指定、行は要素数に応じて自動生成
grid-cols-2 grid-rows-3	列2 × 行3 の 明示的な grid 構造 が確定
h-96	親 grid 全体の高さ。これがないと行高さが auto となり row-span の効果が見た目に現れにくい

grid-rows-N を明示しないと「動いているように見えるが行数が要素配置に応じて暗黙に増減する」状態になり、レイアウトが不安定になります。この罠は次のテクニック2 で詳しく扱います。

ポイント:

メイン + サイドの非対称レイアウトを作りたいときは、親に grid-rows-N を明示し、メイン要素に row-span-N を付けて縦方向に拡大しましょう。

テクニック2: row-span が効かない罠（親と子の N 不整合）

誤解シナリオ:

読者Bさんはテクニック1 で「メイン+サイド3枚」（grid-rows-3 + row-span-3）のレイアウトを学びました。

1. 後日、別の記事一覧で 「メイン+サイド4枚」 にしたくなる
2. サイド要素を1枚追加し、メインの row-span-3 を row-span-4 に変更
3. しかし親の grid-rows-3 をそのままにしてしまう
4. ブラウザで見ると → メインが下方向に飛び出して4行目だけ高さがバラつく、サイド4 の位置が変
5. 「row-span-4 を書いたのに、なぜ意図通りに動かない？」と困惑
6. 公式ドキュメント（Grid Template Rows - Tailwind CSS）を再確認
7. → 親の grid-rows-N も row-span-N の最大値に合わせる必要があると判明、grid-rows-4 に変更で解決

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 grid-rows-3 gap-4 h-96">
    <article class="bg-white rounded-lg p-4 row-span-4">
      <h3 class="font-bold mb-2">メイン記事</h3>
      <p class="text-sm">縦4行分にしたい（けど grid-rows-3 のまま）</p>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド1</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド2</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド3</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド4</h3>
    </article>
  </div>
</div>

明示の3行は h-96/3 ずつ均等ですが、暗黙生成された4行目は grid-auto-rows で内容依存となり高さがバラつきます。サイド4 だけ小さく見え、grid 全体が h-96 を下に超えてはみ出します。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 grid-rows-4 gap-4 h-96">
    <article class="bg-white rounded-lg p-4 row-span-4">
      <h3 class="font-bold mb-2">メイン記事</h3>
      <p class="text-sm">縦4行分</p>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド1</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド2</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド3</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド4</h3>
    </article>
  </div>
</div>

grid-rows-4 で4行明示、h-96 を4等分。メインが左1列縦4行に拡大、サイド4枚が右に均等縦並びで grid が h-96 内に収まります。

解説:

CSS Grid には2種類の grid 構造があります。

種類	生成ルール	行高さの決まり方
明示的 grid	grid-template-rows / grid-rows-N で明示指定	親要素の高さ（h-96 等）を等分
暗黙的 grid	アイテムが明示行を超えたとき自動生成	grid-auto-rows: auto（デフォルト）= 内容依存

row-span-4 が grid-rows-3 を超えると、CSS Grid は 暗黙の4行目を自動生成 します。明示3行は h-96/3 で均等な高さ、暗黙4行目は内容依存の高さとなり、結果として行高さがバラつき grid 全体が下にはみ出します。

N を揃える原則:

親:  grid-rows-N
子:  row-span-M   (要素ごとの最大値)

→ N >= M を必ず満たす（理想的には N = M）

ポイント:

row-span-N の N と親の grid-rows-N の N を必ず一致させましょう。 ズレると暗黙の行が生成され、レイアウトの高さが崩れます。

テクニック3: row-span-full で全行跨ぎ（N 合わせから解放）

誤解シナリオ:

読者Cさんはテクニック1, 2 で「メイン + サイド3枚」のレイアウト（grid-rows-3 + row-span-3）を習得して運用中です。

1. しばらく経って 「サイド記事を 3枚 → 5枚 に増やしたい」 という要件が発生
2. テクニック2 で学んだ通り、親 grid-rows-N と子 row-span-N を 両方同時に修正 する必要
3. 親 grid-rows-3 → grid-rows-5、子 row-span-3 → row-span-5 の 2箇所修正
4. うっかり片方を忘れる → テクニック2 の罠が再発（暗黙行生成、レイアウト崩壊）
5. 「サイドが増減するたびに、2箇所同時修正は面倒だし、ミスしやすい…」と感じる
6. 公式ドキュメント（Grid Row Start / End - Tailwind CSS）を再確認 → row-span-full ユーティリティを発見
7. ソースを見ると grid-row: 1 / -1;（最初から最後まで）
8. → メインを row-span-full にすると、親 grid-rows-N の N に関係なく 常に全行跨ぐ
9. 修正箇所が 親の grid-rows-N だけ になり、N 合わせのミスから解放される

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 grid-rows-5 gap-4 h-96">
    <article class="bg-white rounded-lg p-4 row-span-3">
      <h3 class="font-bold mb-2">メイン記事</h3>
      <p class="text-sm">本来は5行分跨ぎたいが row-span-3 のまま修正忘れ</p>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド1</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド2</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド3</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド4</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド5</h3>
    </article>
  </div>
</div>

メインが3行までしか跨がないため、4〜5行目に2列ぶんサイドが配置されてレイアウトが崩壊します。サイド4 がメインの真下、サイド5 がその右、と意図しない位置に。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 grid-rows-5 gap-4 h-96">
    <article class="bg-white rounded-lg p-4 row-span-full">
      <h3 class="font-bold mb-2">メイン記事</h3>
      <p class="text-sm">grid-rows-N の N に関係なく全行跨ぐ</p>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド1</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド2</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド3</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド4</h3>
    </article>
    <article class="bg-white rounded-lg p-4">
      <h3 class="font-bold mb-2">サイド5</h3>
    </article>
  </div>
</div>

メインが grid-rows-5 の5行全部を跨ぎ、サイド5枚が右1列に均等縦並び。意図通りの非対称レイアウトに。

さらに、サイドを 6枚 / 7枚 に増やしたい ときは、親の grid-rows-N を変えるだけ。メイン側のクラスは触らなくていいので、修正箇所が半減します。

解説:

row-span-full の正体は grid-row: 1 / -1; です。

Tailwind ユーティリティ	生成される CSS	意味
row-span-3	grid-row: span 3 / span 3;	「3行跨ぐ」（数値指定）
row-span-full	grid-row: 1 / -1;	「最初の行から最後の行まで」（全行跨ぎ）

CSS Grid の grid-row-end: -1 は「最後の行のライン」を意味します。負のインデックスで「最後から数える」という指定が CSS Grid 仕様で定義されており、親の grid-rows-N の N に関係なく、常に grid の最終行までを指定 できます。

row-span-N vs row-span-full の使い分け:

用途	推奨
行数が 固定（今後変わらない）	row-span-N（数値指定）
行数が 動的（サイドの数が増減する可能性）	row-span-full（全行跨ぎ）
親 grid の N を意識せず「常に全行」と決まっている	row-span-full

メンテナンス目線の利点:

修正パターン	row-span-N	row-span-full
サイド3枚 → 5枚に変更	2箇所修正（親 N + 子 N）	1箇所修正（親 N のみ）
N 合わせミスのリスク	高（テクニック2 の罠再発）	なし
コードの意図の明確さ	数値が一致してるか確認が必要	「全行跨ぎ」と一目で分かる

補足: row-span-full の提供状況と任意値構文

row-span-full は Tailwind v1.2.0 以降から提供されている標準ユーティリティで、生成 CSS は grid-row: 1 / -1; です。CSS Grid 仕様の 負のインデックス（最後から数える指定）を活用しているため、親 grid-rows-N の N に関係なく常に grid の最終行までを指定できます。

標準の数値ユーティリティ（row-span-1 〜 row-span-6）を超える行数が必要な場合は、任意値構文で row-[span_16_/_span_16] のように指定することも可能です（5/5 公開の fr 単位 テクニック三選 で扱った任意値構文と同じパターン）。

ポイント:

メインを「常に全行跨ぎ」にしたいときは、row-span-full を使いましょう。（親の grid-rows-N を変えるだけで済み、テクニック2 の N 合わせ罠から解放されます）

まとめ

TailwindCSS row-span を使いこなす3つのテクニックを解説しました。

• テクニック1: 基本の行結合は grid-rows-N + row-span-N の組み合わせで。h-96 等の親高さも忘れずに
• テクニック2: row-span-N の N と親の grid-rows-N の N を必ず一致させる。ズレると暗黙の行が生成されてレイアウトが崩れる
• テクニック3: 「常に全行跨ぎ」と決まっているなら row-span-full。grid-row: 1 / -1 で N 合わせから解放され、メンテナンス時の修正箇所が半減する

row-span は一見シンプルなユーティリティですが、親の grid 構造（grid-rows-N / h-96）と整合させて初めて意図通りに機能します。それを乗り越えれば、ブログのトップページや雑誌風のリッチな非対称レイアウトを HTML を二重化せず1セットで 表現できます。これまで grid-cols-N の均等並びでしか書けなかった方は、ぜひ row-span の世界を試してみてください。

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

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

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

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

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

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

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

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

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