Spanning Columns and Rows
Make cells span multiple tracks with col-span and row-span.
Syntax
class="col-span-2 row-span-2"Inside a grid, a child can span several columns or rows.
col-span-2— occupy two columns.row-span-2— occupy two rows.col-start-2— begin at a specific line.
This is how you build magazine-style layouts with featured cells.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer makes a featured blog post span all three grid columns using col-span-3 while regular posts take one column each.
- A form's submit button spans both columns of a two-column form grid using col-span-2 to align with full-row controls.
- A dashboard tile that needs extra vertical space spans two rows using row-span-2, while other tiles stay single-row.
More examples
Featured item spans columns
col-span-3 stretches the featured post across all three columns, while the remaining posts each occupy a single column.
<div class="grid grid-cols-3 gap-4">
<div class="col-span-3 bg-indigo-600 text-white p-6 rounded-lg">
Featured Post
</div>
<div class="bg-white border p-4 rounded">Post A</div>
<div class="bg-white border p-4 rounded">Post B</div>
<div class="bg-white border p-4 rounded">Post C</div>
</div>Asymmetric two-column layout
col-span-3 gives the main column three quarters of the grid width, and col-span-1 reserves the remaining quarter for the sidebar.
<div class="grid grid-cols-4 gap-6">
<main class="col-span-3 bg-white p-6 rounded shadow">Main content</main>
<aside class="col-span-1 bg-gray-50 p-4 rounded">Sidebar</aside>
</div>Row spanning for tall tiles
row-span-2 makes the first tile occupy both grid rows vertically while two shorter tiles stack in the remaining column.
<div class="grid grid-cols-2 grid-rows-2 gap-4 h-64">
<div class="row-span-2 bg-blue-500 text-white rounded p-4">Tall tile</div>
<div class="bg-blue-100 rounded p-4">Short A</div>
<div class="bg-blue-200 rounded p-4">Short B</div>
</div>
Discussion