Grid
Examples
Section titled “Examples”Columns
Section titled “Columns”1
2
3
4
5
6
1
2
3
4
5
6
<div class="grid w-full grid-cols-3 gap-4"> <div class="rounded bg-surface-muted p-4 text-center text-sm">1</div> <div class="rounded bg-surface-muted p-4 text-center text-sm">2</div> <div class="rounded bg-surface-muted p-4 text-center text-sm">3</div> <div class="rounded bg-surface-muted p-4 text-center text-sm">4</div> <div class="rounded bg-surface-muted p-4 text-center text-sm">5</div> <div class="rounded bg-surface-muted p-4 text-center text-sm">6</div></div><div className="grid w-full grid-cols-3 gap-4"> <div className="rounded bg-surface-muted p-4 text-center text-sm">1</div> <div className="rounded bg-surface-muted p-4 text-center text-sm">2</div> <div className="rounded bg-surface-muted p-4 text-center text-sm">3</div> <div className="rounded bg-surface-muted p-4 text-center text-sm">4</div> <div className="rounded bg-surface-muted p-4 text-center text-sm">5</div> <div className="rounded bg-surface-muted p-4 text-center text-sm">6</div></div>Responsive columns
Section titled “Responsive columns”Users
12,408
Active now
342
Orders
128
Revenue
$8.4k
Users
12,408
Active now
342
Orders
128
Revenue
$8.4k
<div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div class="rounded border border-border p-4"> <p class="text-text-muted text-xs">Users</p> <p class="text-2xl font-semibold">12,408</p> </div> <div class="rounded border border-border p-4"> <p class="text-text-muted text-xs">Active now</p> <p class="text-2xl font-semibold">342</p> </div> <div class="rounded border border-border p-4"> <p class="text-text-muted text-xs">Orders</p> <p class="text-2xl font-semibold">128</p> </div> <div class="rounded border border-border p-4"> <p class="text-text-muted text-xs">Revenue</p> <p class="text-2xl font-semibold">$8.4k</p> </div></div><div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div className="rounded border border-border p-4"> <p className="text-text-muted text-xs">Users</p> <p className="text-2xl font-semibold">12,408</p> </div> <div className="rounded border border-border p-4"> <p className="text-text-muted text-xs">Active now</p> <p className="text-2xl font-semibold">342</p> </div> <div className="rounded border border-border p-4"> <p className="text-text-muted text-xs">Orders</p> <p className="text-2xl font-semibold">128</p> </div> <div className="rounded border border-border p-4"> <p className="text-text-muted text-xs">Revenue</p> <p className="text-2xl font-semibold">$8.4k</p> </div></div>Auto-fit
Section titled “Auto-fit”Reflows
by available
width
no
breakpoints
Reflows
by available
width
no
breakpoints
<div class="grid w-full gap-4" style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"> <div class="rounded bg-surface-muted p-4 text-center text-sm">Reflows</div> <div class="rounded bg-surface-muted p-4 text-center text-sm"> by available </div> <div class="rounded bg-surface-muted p-4 text-center text-sm">width</div> <div class="rounded bg-surface-muted p-4 text-center text-sm">no</div> <div class="rounded bg-surface-muted p-4 text-center text-sm"> breakpoints </div></div><div className="grid w-full gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))" }}> <div className="rounded bg-surface-muted p-4 text-center text-sm"> Reflows </div> <div className="rounded bg-surface-muted p-4 text-center text-sm"> by available </div> <div className="rounded bg-surface-muted p-4 text-center text-sm"> width </div> <div className="rounded bg-surface-muted p-4 text-center text-sm">no</div> <div className="rounded bg-surface-muted p-4 text-center text-sm"> breakpoints </div></div>Spanning
Section titled “Spanning”
col-span-2
row-span-2
C
D
col-span-2
row-span-2
C
D
<div class="grid w-full grid-cols-3 gap-4"> <div class="rounded bg-surface-muted p-4 text-center text-sm col-span-2"> col-span-2 </div> <div class="rounded bg-surface-muted p-4 text-center text-sm row-span-2"> row-span-2 </div> <div class="rounded bg-surface-muted p-4 text-center text-sm">C</div> <div class="rounded bg-surface-muted p-4 text-center text-sm">D</div></div><div className="grid w-full grid-cols-3 gap-4"> <div className="rounded bg-surface-muted p-4 text-center text-sm col-span-2"> col-span-2 </div> <div className="rounded bg-surface-muted p-4 text-center text-sm row-span-2"> row-span-2 </div> <div className="rounded bg-surface-muted p-4 text-center text-sm">C</div> <div className="rounded bg-surface-muted p-4 text-center text-sm">D</div></div>Placement
Section titled “Placement”
col-start-1
col-start-2 col-end-4
col-start-1
col-start-2 col-end-4
<div class="grid w-full grid-cols-3 gap-4"> <div class="rounded bg-surface-muted p-4 text-center text-sm col-start-1"> col-start-1 </div> <div class="rounded bg-surface-muted p-4 text-center text-sm col-start-2 col-end-4" > col-start-2 col-end-4 </div></div><div className="grid w-full grid-cols-3 gap-4"> <div className="rounded bg-surface-muted p-4 text-center text-sm col-start-1"> col-start-1 </div> <div className="rounded bg-surface-muted p-4 text-center text-sm col-start-2 col-end-4"> col-start-2 col-end-4 </div></div>Cell alignment
Section titled “Cell alignment”
1
2
3
1
2
3
<div class="grid w-full grid-cols-3 gap-4 justify-items-center"> <div class="rounded bg-surface-muted w-16 h-16 grid place-items-center text-sm" > 1 </div> <div class="rounded bg-surface-muted w-16 h-16 grid place-items-center text-sm" > 2 </div> <div class="rounded bg-surface-muted w-16 h-16 grid place-items-center text-sm" > 3 </div></div><div className="grid w-full grid-cols-3 gap-4 justify-items-center"> <div className="rounded bg-surface-muted w-16 h-16 grid place-items-center text-sm"> 1 </div> <div className="rounded bg-surface-muted w-16 h-16 grid place-items-center text-sm"> 2 </div> <div className="rounded bg-surface-muted w-16 h-16 grid place-items-center text-sm"> 3 </div></div>Two-pane layout
Section titled “Two-pane layout”Revenue
Orders
Filters
Revenue
Orders
<div class="grid w-full grid-cols-4 gap-4"> <aside class="card col-span-4 sm:col-span-1"> <div class="card-body"><h3 class="card-title">Filters</h3></div> </aside> <section class="col-span-4 grid gap-4 sm:col-span-3 sm:grid-cols-2"> <div class="card"> <div class="card-body"><h3 class="card-title">Revenue</h3></div> </div> <div class="card"> <div class="card-body"><h3 class="card-title">Orders</h3></div> </div> </section></div><div className="grid w-full grid-cols-4 gap-4"> <Card title="Filters" className="col-span-4 sm:col-span-1" /> <section className="col-span-4 grid gap-4 sm:col-span-3 sm:grid-cols-2"> <Card title="Revenue" /> <Card title="Orders" /> </section></div>Reference
Section titled “Reference”There is no .grid class — see Conventions › Layout for where the utilities come from. The class names are identical in both bundles, so the two tabs above differ only in class vs className.
| Utility | Effect |
|---|---|
grid |
Two-dimensional layout |
grid-cols-{n} |
n equal columns. Prefix for a breakpoint: sm:grid-cols-2 lg:grid-cols-4 |
gap-* |
Space between cells |
col-span-{n} |
A cell covers n columns; row-span-{n} for rows |
col-start-{n} |
Pins a cell to grid line n; likewise col-end, row-start, row-end. Lines run 1…n+1, so a 3-column grid has lines 1–4 |
justify-items-* |
Cell alignment on the inline axis; items-* on the block axis, place-items-* both |
grid-flow-dense |
Packs later items into earlier gaps |
grid-cols-subgrid |
A nested grid inherits its parent’s tracks |
Cells stretch to fill their track by default. A track list can’t be a utility, so set grid-template-columns inline: repeat(auto-fill, minmax(12rem, 1fr)) fits as many 12rem columns as the width allows, and auto-fit instead collapses the empty tracks when there are few items.
Grids nest, so a pane can run its own responsive grid inside an outer column. For one-dimensional layouts see Row. The full utility set is Tailwind’s — these are the ones an admin layout reaches for.