GridItem.
GridItem spans columns inside a Grid, with the same responsive map as cols. Use it for the one or two cells that should be larger than the rest.
When to reach for it
Usage
GridItem is a thin wrapper over Tailwind utilities, so it costs nothing at runtime and composes with every other primitive.
- A primary chart that should take two thirds of a dashboard row.
- A full-width table below a row of cards.
- Form fields that need a whole line on small screens but half a line on large ones.
import { Grid } from "@/components/ui/grid";
import { GridItem } from "@/components/ui/grid-item";In practice
Examples
Each example is a real composition with shadcn components. Switch to the Code tab for the source, or copy it directly.
Dashboard spans
The chart takes two of three columns on large screens, the referrer list takes one, and the table spans the full row.
| Deployment | Environment | Status | By | When |
|---|---|---|---|---|
| dpl_8f21 | Production | Ready | Mara | 12 min ago |
| dpl_8f1c | Preview | Ready | Jonas | 1 hour ago |
| dpl_8f0a | Production | Failed | Theo | Yesterday |
Responsive address form
A six-column grid gives fine control: half-width fields at md, full width below, and a three-up last line that collapses to pairs.
Reference
Props
Every primitive also accepts the native props of its element, including className, children, ref, and data attributes.
| Prop | Type | Default |
|---|---|---|
spanColumns to span per breakpoint. "full" spans the entire row. | Responsive<1 | 2 | 3 | 4 | 5 | 6 | 12 | "full"> | 1 |
Good to know
Notes
- GridItem is optional. Cells that span a single column can be plain children of Grid.
- A span larger than the parent's column count wraps to its own row, matching CSS Grid behavior.