跨列与跨行
使用 col-span-* 和 row-span-* 实用程序，让项目跨越多个列或行，以实现复杂的网格布局。
跨列与跨行 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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.
常见问题解答
「跨列与跨行」课时是免费的吗？
是的 — 「跨列与跨行」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「跨列与跨行」这节课中我会学到什么？
使用 col-span-* 和 row-span-* 实用程序，让项目跨越多个列或行，以实现复杂的网格布局。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「跨列与跨行」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。