Grid
A CSS Grid layout primitive with responsive columns/rows, auto-fit/auto-fill tracks, named areas, and a companion ZyraGridItem for column/row span.
1
2
3
4
5
6
API
All inputs and configuration options for zyra-grid.
| Prop | Type | Default | Description |
|---|---|---|---|
columns / rows | GridColumnsValue | GridResponsiveColumns | 1 | Track sizing, responsive-capable |
minTrackSize | string | number | '180px' | Minimum track size for auto-fit/auto-fill |
areas | string[] | undefined | Rows of named grid-template-areas |
autoFlow | GridAutoFlow | 'row' | grid-auto-flow |
justifyItems / alignItems | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Default alignment of grid items |
gap / columnGap / rowGap | BoxSpacing | 'none' | Gap between tracks |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Visual reflow via grid-auto-flow doesn’t change DOM/tab order — keep source order meaningful