Объединение столбцов и строк
Растягивайте элементы на несколько столбцов или строк с помощью utility-классов col-span-* и row-span-* для сложных схем Grid.
«Объединение столбцов и строк» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Объединение столбцов и строк»?
Растягивайте элементы на несколько столбцов или строк с помощью utility-классов col-span-* и row-span-* для сложных схем Grid. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?
Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Объединение столбцов и строк»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?
Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Определение столбцов Grid
- Объединение столбцов и строк
- Строки Grid и автоматическое размещение
- Промежутки, распределение и выравнивание в Grid