列と行のまたぎ
col-span-*とrow-span-*の各ユーティリティを使い、項目を複数の列または行にまたがらせて複雑なグリッド配置を作ります。
「列と行のまたぎ」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What Is Spanning in Grid?
By default, each child of a CSS Grid container occupies exactly one column and one row. Spanning lets a single grid item stretch across multiple columns or rows to create asymmetric, magazine-style layouts. Tailwind provides col-span-* and row-span-* utilities that translate directly to grid-column: span N and grid-row: span N in CSS.
<!-- Item spans 2 columns out of a 4-column grid -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2 bg-blue-200 p-4">Wide item</div>
<div class="bg-blue-100 p-4">Normal</div>
<div class="bg-blue-100 p-4">Normal</div>
</div>col-span-* Utilities
Tailwind ships with col-span-1 through col-span-12 as well as col-span-full, which spans all available columns. Apply these utilities to a grid child, not the container. For example, in a 12-column grid, col-span-8 gives you a main content area and the remaining 4 columns can hold a sidebar — a common two-pane layout pattern.
<!-- Classic 8 + 4 main/sidebar layout -->
<div class="grid grid-cols-12 gap-6">
<main class="col-span-8 bg-white p-6 rounded shadow">
Main Content
</main>
<aside class="col-span-4 bg-gray-100 p-6 rounded">
Sidebar
</aside>
</div>col-span-full for Full-Width Items
The col-span-full class makes an element stretch across every column in its grid, equivalent to grid-column: 1 / -1. This is perfect for full-width banners, section titles, or dividers that need to break out of a card grid without changing the grid definition. It always spans whatever the current number of columns is, even if you change the column count responsively.
<!-- Full-width banner inside a 3-column card grid -->
<div class="grid grid-cols-3 gap-4">
<div class="col-span-full bg-indigo-500 text-white p-4 text-center rounded">
Featured Announcement
</div>
<div class="bg-gray-100 p-4">Card A</div>
<div class="bg-gray-100 p-4">Card B</div>
<div class="bg-gray-100 p-4">Card C</div>
</div>row-span-* Utilities
row-span-* works just like column spanning but on the vertical axis. A row-span-2 element occupies two row tracks, making it taller than its neighbors. This is ideal for feature images or hero cards in a bento-style grid, where one prominent item sits next to multiple smaller ones.
<!-- Bento grid: one tall card beside two shorter ones -->
<div class="grid grid-cols-2 grid-rows-2 gap-4 h-64">
<div class="row-span-2 bg-purple-300 p-4 rounded">Tall card</div>
<div class="bg-purple-100 p-4 rounded">Short A</div>
<div class="bg-purple-100 p-4 rounded">Short B</div>
</div>Combining col-span and row-span
You can combine col-span-* and row-span-* on the same element to create a large feature cell. This is the foundation of bento-box and mosaic layouts. For example, a hero image cell that spans col-span-2 row-span-2 fills a 2×2 area while surrounding cells fill in around it automatically.
<!-- 3x3 bento grid with a featured 2x2 cell -->
<div class="grid grid-cols-3 grid-rows-3 gap-3 h-72">
<div class="col-span-2 row-span-2 bg-sky-400 text-white p-4 rounded">
Featured
</div>
<div class="bg-sky-100 p-3 rounded">A</div>
<div class="bg-sky-100 p-3 rounded">B</div>
<div class="bg-sky-100 p-3 rounded">C</div>
<div class="col-span-2 bg-sky-200 p-3 rounded">Wide bottom</div>
</div>Explicit Column Placement
Beyond spanning, you can precisely control where an item starts using col-start-* and col-end-* utilities. col-start-2 places the item's left edge on the second grid line, and col-end-5 ends it on the fifth. This fine-grained control lets you skip columns intentionally to create whitespace in your layout.
<!-- Item starts at column 2, ends at column 5 (spans 3) -->
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-end-5 bg-rose-200 p-4 rounded">
Starts at line 2, ends at line 5
</div>
<div class="bg-rose-100 p-4 rounded">Normal</div>
</div>row-start-* and row-end-* Placement
Similarly, row-start-* and row-end-* control vertical placement explicitly. These are most useful when you need to override auto-placement to position specific items in exact grid areas. When combined with col-start and col-end, you effectively pin elements to a specific grid region.
<!-- Item pinned to row 2, columns 2-3 -->
<div class="grid grid-cols-3 grid-rows-3 gap-3 h-48">
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="col-start-2 col-span-2 row-start-2 bg-emerald-300 p-3 rounded">
Explicit position
</div>
</div>Responsive Spanning
Combine responsive prefixes with span utilities to create layouts that change dramatically between breakpoints. An item might span all columns on mobile to stay readable, then shift to a narrow sidebar span on desktop. The pattern col-span-full md:col-span-4 lg:col-span-3 achieves exactly this: full width on mobile, narrower on larger screens.
<!-- Card spans full on mobile, one-third on large screens -->
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4 bg-amber-100 p-4 rounded">
Sidebar/card
</div>
<div class="col-span-12 lg:col-span-8 bg-amber-50 p-4 rounded">
Main content
</div>
</div>Avoiding Overflow With Auto
If a child has both col-start-* and col-span-* that conflict with the grid bounds, the browser wraps it to the next row. Use col-auto to explicitly let the browser choose the start position — this resets any inherited explicit placement back to automatic and is useful when you only want to control the span, not the start.
<!-- col-auto resets to automatic placement -->
<div class="grid grid-cols-4 gap-3">
<div class="col-span-2 bg-violet-200 p-3">Spans 2</div>
<div class="col-auto bg-violet-100 p-3">Auto-placed</div>
<div class="col-auto bg-violet-100 p-3">Auto-placed</div>
<div class="col-span-3 bg-violet-300 p-3">Spans 3</div>
</div>Real-World Blog Layout
A classic blog layout features a wide main post area and a narrow sidebar. Using a 12-column base grid with col-span-8 for the article and col-span-4 for the sidebar, you get a 2:1 ratio. Adding col-span-12 for a full-width footer row completes the structure — all with no custom CSS.
<div class="grid grid-cols-12 gap-6 p-6">
<header class="col-span-12 bg-slate-800 text-white p-4 rounded">
Blog Header
</header>
<article class="col-span-12 md:col-span-8 bg-white p-6 rounded shadow">
Article content here...
</article>
<aside class="col-span-12 md:col-span-4 bg-gray-50 p-4 rounded">
Widgets
</aside>
<footer class="col-span-12 bg-slate-700 text-white p-4 rounded text-center">
Footer
</footer>
</div>Combining Spanning Utilities
Here is a magazine-style card grid that combines column and row spanning. A large feature card occupies col-span-2 row-span-2, two tall side cards each use row-span-1, and a full-width banner uses col-span-full. Composing these utilities together gives you editorial layouts that used to require complex CSS with named grid areas.
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 row-span-2 bg-blue-500 text-white p-6 rounded">
Feature Story
</div>
<div class="bg-blue-200 p-4 rounded">Short A</div>
<div class="bg-blue-200 p-4 rounded">Short B</div>
<div class="col-span-full bg-blue-100 p-4 rounded text-center">
Full-Width Banner
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: col-span-* and row-span-* stretch grid items across multiple tracks, col-start-* and col-end-* enable precise explicit placement, and col-span-full always spans every column regardless of count. Next up we explore how to define explicit grid rows and control auto-placement behavior.
よくある質問
「列と行のまたぎ」レッスンは無料ですか？
はい。「列と行のまたぎ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「列と行のまたぎ」で何を学びますか？
col-span-*とrow-span-*の各ユーティリティを使い、項目を複数の列または行にまたがらせて複雑なグリッド配置を作ります。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「列と行のまたぎ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。