Grid / GridItem
Markdown for agentsTyped CSS grid with column counts per breakpoint (literal utilities that survive purging), auto-fit min-column mode, and GridItem spans.
npx slipstream-ui@latest add gridAuto-fit card grid
Streaming chat
Wraps at every width — no breakpoint math.
Agent dashboard
Wraps at every width — no breakpoint math.
RAG citations
Wraps at every width — no breakpoint math.
Settings form
Wraps at every width — no breakpoint math.
Multi-thread
Wraps at every width — no breakpoint math.
Empty state
Wraps at every width — no breakpoint math.
Fixed columns + spans
span=4 from md (hero row)
cols=2 base
4 from md
span=2 (half width)
…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | number | — | Base column count (1-6). |
| smCols / mdCols / lgCols | number | — | Column counts from each breakpoint up (1-6). |
| minCol | string | — | Auto-fit mode: repeat(auto-fit, minmax(<minCol>, 1fr)) — cards wrap responsively. Overrides cols*. |
| gap | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Token gap between cells. |
| as | 'div' | 'span' | 'section' | 'ul' | 'div' | Semantic element (use 'ul' with GridItem as="li"). |
| span / smSpan / mdSpan / lgSpan | number | — | GridItem column spans per breakpoint (1-6). |
Accessibility
- Visual column reflow never reorders DOM nodes — reading order equals source order.
- List grids pair as="ul" with GridItem as="li" for item semantics.
- Order cells by reading priority, not visual position.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.