열과 행 걸치기

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.