defuss-shadcn / Guides / Layout / grid
Grid
Intrinsic card grids, explicit tracks and aligned subgrids. Responsive to available space without a breakpoint utility generator. Every code block is the live demo - the shown source is the executed source, and each card carries a device toolbar that really resizes the sandbox.
On this page (7)
§Intrinsic columns without breakpoints
grid only enables Grid. Add grid-cols-auto for auto-fit columns with a preferred minimum; --layout-min defaults to 16rem. Empty tracks collapse, and populated tracks share spare space. This is the card-wall pattern: team directories, feature matrices and gallery grids that reflow as the page widens - no media queries. Resize the demo with the toolbar and watch tracks appear and collapse.
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-min)), 1fr));The inner minimum prevents the preferred track width itself from exceeding a narrow container. It does not wrap long identifiers, shrink arbitrary media or eliminate intrinsic child overflow. Set those policies on the content.
§Explicit tracks and spans
Fixed track counts with explicit spans compose the classic dashboard: a full-width header, a filter rail and a results region that takes the remaining columns.
| Concern | Classes |
|---|---|
| Columns | grid-cols-1 through grid-cols-12; equal minmax(0, 1fr) tracks. |
| Rows | grid-rows-1 through grid-rows-6. |
| Spans | col-span-1…12, row-span-1…6, col-span-full, row-span-full. |
| Other tracks | grid-cols-none, grid-rows-none, auto-cols-auto, auto-rows-auto. |
| Subgrid | grid-cols-subgrid, grid-rows-subgrid. |
| Alignment | items-*, justify-items-start/end/center/stretch, justify-self-auto/start/end/center/stretch, place-items-start/end/center/stretch/baseline, place-self-auto/start/end/center/stretch. |
A span larger than the available explicit tracks can create implicit columns. Keep spans compatible with every responsive track configuration; do not use a fixed span in a one-column auto-fit layout without an intentional override.
§Alignment inside tracks
Items stretch to fill their track area by default. place-items-* sets the default for every cell (items-* and justify-items-* address the block and inline axes separately); justify-self-* and place-self-* override one item - centering an icon in its cell, or pinning an action to the end of a row.
§Share track alignment with subgrid
Cards in a row usually carry different amounts of body copy, but their footers should still line up - pricing tiers, feature cards, article teasers. Subgrid lets each card adopt the parent's row tracks, so one row height is negotiated across all cards.
Each card spans three parent rows and adopts those rows as its subgrid. Subgrid is a structure contract, not a universal card rule. Without support, the cards retain ordinary independent grids; shared row alignment is the enhancement. CSS Grid is layout, not an ARIA grid widget.
§A realistic card wall
The same auto-fit track list drives a typical content listing - article teasers, product cards, team directories. Each card is ordinary component markup (card, title, description, badge); the grid owns the tracks and nothing here measures the viewport. Resize with the toolbar: the wall deals out one, two, three or more columns as the frame widens.
§Real world: the holy-grail layout
When the skeleton is stable - header, nav, main, aside, footer - a fixed 12-track grid with explicit spans states the structure directly: grid grid-cols-12 gap-4, col-span-full for the chrome, col-span-3 / col-span-6 / col-span-3 for the body. The middle spans sum to 12, so every item lands on a declared track and no implicit columns are created. Resize with the toolbar and watch the minmax(0, 1fr) tracks compress while the proportions hold - auto-fit would have reflowed the skeleton; spans keep it.
§Platform references
CSS Grid and subgrid · CSS container queries
Comments, ideas or improvements? Edit this page's source on GitHub