Grid
Grid
CSS Grid columns, spans, gaps, collapse and suffix items. Use Row / Col for 24-column Flex layouts.
Choosing a layout
- Grid + GridItem: Use for form columns and card grids with consistent column widths, spans, responsive column counts, or collapsed rows and suffix items.
- Row + Col: Use for 24-column Flex layouts that need horizontal/vertical alignment, wrapping control, fixed and flexible widths together, or responsive ordering. Row controls the row; Col controls width, offset and order.
- Space: Use for simple groups of buttons, tags or text that only need spacing, direction and alignment. Use native Flex for more flexible width allocation.
Examples
Columns, spans and offsets
Collapsed rows and suffix slot
Responsive columns, gaps and spans
Insert, remove and reorder
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| cols | Columns per row, minimum 1 | number / ResponsiveValue | 24 |
| row-gap | Row gap in px | number / ResponsiveValue | 0 |
| col-gap | Column gap in px | number / ResponsiveValue | 0 |
| collapsed | Collapse overflowing rows | boolean | false |
| collapsed-rows | Visible rows while collapsed, minimum 1 | number | 1 |
Events
| Event | Description |
|---|
Slots
| Slot | Description |
|---|---|
| default | Layout content |
Methods
| Method | Description |
|---|
Responsive behavior and accessibility
Breakpoints use the viewport: xs is the baseline, sm ≥576, md ≥768, lg ≥992, xl ≥1200, xxl ≥1600px. Values cascade from the largest matching configured breakpoint. SSR uses xs; the viewport and Grid collapse/reordering are resolved after mount. These layout containers add no keyboard shortcuts; consumers provide semantic content and focusable controls. No public methods or dedicated theme tokens.
GridItem
| Prop | Description | Type | Default |
|---|---|---|---|
| span | Grid span | number / ResponsiveValue | 1 |
| offset | Empty tracks before the item | number / ResponsiveValue | 0 |
| suffix | Suffix at the end of the row | boolean | false |
The default slot receives { overflow: boolean }, indicating hidden items. No custom events or public methods.
Imports
Grid only owns Grid.Item. Row and Col are standalone components with independent entries, styles, documentation, menus and demos. Grid.Row/Grid.Col, Grid re-exports of Row/Col and GridRowInstance/GridColInstance are removed. Import from the library root or standalone row/col entries. Installing Grid no longer registers Row/Col.