What it does
Grid supports fixed columns, auto-fit/auto-fill layouts, and custom templates with named areas. GridItem supports responsive spans and starts, optional surfaces, padding, and self-alignment. Native props and refs are retained.
Common use cases
- Responsive dashboards with mobile-safe spans.
- Card collections that fit their available container width.
- Forms and account sections with named areas.
- Nested layouts with shared spacing and appearance tokens.
Accessibility
Use Grid as a list with li items or a labeled section when appropriate. Grid does not add focus stops or intercept child keyboard events. Dense flow and explicit placement are opt-in; keep DOM order meaningful for keyboard and screen-reader users.
FAQ
What makes Grid dynamic?
CSS responds to available space and viewport breakpoint variants. Consumers filter, sort, insert, or remove keyed children with normal React state; Grid does not maintain a separate data model.
How does Grid differ from Bento Grid or DataTable?
Grid provides neutral responsive layout and placement. Bento Grid adds styled feature tiles, expansion, and detail interactions. DataTable provides tabular record behavior such as sorting and selection.
Does Grid require Framer Motion?
No. The static grid entry has no animation dependency. Reflow animation, drag, resize, and persistence are not part of this initial release.
Are breakpoints based on the viewport or the container?
Responsive maps use the consumer's Tailwind viewport breakpoints. Auto-fit and auto-fill layouts size columns to the available parent width without breakpoint maps or JavaScript observers.
How do auto-fit and auto-fill differ?
Auto-fit collapses empty repeated tracks, letting occupied tracks grow. Auto-fill retains empty tracks. Auto layouts support ordinary span-1 items and full-width items; wider numeric spans and explicit column starts normalize to ordinary placement.
How do item spans behave on mobile?
By default, items stack one per row below the consumer's sm breakpoint, resetting spans, starts, and named areas. Set stackOnMobile={false} to retain the configured mobile layout. From sm upward, the declared layout and placement resume. Consumer style overrides take precedence.
Does CSS Grid require role=grid?
No. This is a layout component, not an interactive ARIA grid widget. Native list or section semantics and child controls remain available. Explicit placement, dense flow, and named areas can change visual order; keep a meaningful DOM reading sequence.
How do I configure Tailwind scanning?
Add an @source path to the installed component package relative to your stylesheet. If you vendor Grid through the CLI, include the resulting source folder in Tailwind's scan scope.