baseUtilities
Grid
Grid tracks, column/row spans, subgrid, auto-flow, and responsive auto-fill utilities.
CSS Grid utilities define container tracks, item spans, subgrid alignment, and responsive auto-filling columns.
Container, columns, and rows
Loading components…
<div class="grid grid-cols-3 gap-md w-full max-w-xl"> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 1 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 2 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 3 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 4 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 5 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 6 </div></div>| Class | Declaration |
|---|---|
grid | display: grid (sets --_grid-col-min: min(100%, 25ch)) |
grid-cols-1 to grid-cols-12 | grid-template-columns: repeat(N, minmax(0, 1fr)) |
grid-rows-1 to grid-rows-12 | grid-template-rows: repeat(N, auto) |
grid-flow-row | grid-auto-flow: row |
grid-flow-col | grid-auto-flow: column |
grid-cols-N and grid-rows-N update --_grid-cols and --_grid-rows coordination variables.
Spanning
Loading components…
<div class="grid grid-cols-3 gap-md w-full max-w-xl"> <div class="col-span-2 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > col-span-2 </div> <div class="bg-muted text-muted-foreground rounded-md p-sm text-center text-sm font-strong"> 1 </div> <div class="bg-muted text-muted-foreground rounded-md p-sm text-center text-sm font-strong"> 1 </div> <div class="col-span-2 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > col-span-2 </div> <div class="col-span-3 bg-secondary text-secondary-foreground rounded-md p-sm text-center text-sm font-strong" > col-span-3 </div></div>Spans clamp to the declared track count via span min(N, var(--_grid-cols)):
| Class | Declaration |
|---|---|
col-span-1 to col-span-12 | grid-column: span min(N, var(--_grid-cols)) |
row-span-1 to row-span-12 | grid-row: span min(N, var(--_grid-rows)) |
Subgrid
| Class | Declaration |
|---|---|
grid-cols-subgrid | grid-template-columns: subgrid |
grid-rows-subgrid | grid-template-rows: subgrid |
Stacking with grid-area-pile
Loading components…
<div class="grid grid-area-pile w-full max-w-xl h-md"> <div class="size-full bg-muted rounded-lg"></div> <span class="ui-badge" data-variant="primary">grid-area-pile</span> <span class="self-start justify-self-end m-sm ui-badge" data-variant="muted">stacked layer</span></div>grid-area-pile stacks direct children into a single cell with place-items: center. Useful for media overlays and avatar fallbacks.
Place items
| Class | Declaration |
|---|---|
place-items-start | place-items: start |
place-items-center | place-items: center |
place-items-end | place-items: end |
Responsive auto-fill grid
Loading components…
<div class="flex flex-col gap-xs w-full"> <span class="text-xs text-muted-foreground font-strong"> grid grid-flow-row grid-cols-4 — tracks auto-fill, then wrap. Expand to widen. </span> <div class="grid grid-flow-row grid-cols-4 gap-md w-full"> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 1 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 2 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 3 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 4 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 5 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 6 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 7 </div> <div class="bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong"> 8 </div> </div></div>Combining grid-flow-row with grid-cols-N (N > 1) activates a gap-aware auto-fill formula. Columns wrap automatically as the container narrows without breakpoint queries.
<div class="grid grid-flow-row grid-cols-4 gap-md">
<!-- up to 4 columns, wrapping automatically -->
</div>Coordination variables
| Variable | Set by | Default | Consumed by |
|---|---|---|---|
--_grid-cols | grid-cols-N | 1 | col-span-* clamping, auto-fill grid |
--_grid-rows | grid-rows-N | 1 | row-span-* clamping |
--_grid-col-min | .grid | min(100%, 25ch) | grid-flow-row auto-fill minimum track floor |