BankaiGrid
A polymorphic CSS-grid container for 2D layouts. Enumerated props reflect as data-bankai-*; continuous track values (columns/rows/areas/gap) ride --bankai-grid-* custom properties read by the theme's :where() rules.
Example
columns="3" · gap="4"
123456
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | HTML tag name | 'div' | Element to render as. Polymorphic — any HTML tag name. |
columns | number | string | — | grid-template-columns. A number (or a bare-numeric string like '3') is a count of equal repeat(<n>, minmax(0, 1fr)) tracks; any other string is a verbatim value ('200px 1fr', 'repeat(auto-fill, minmax(10rem, 1fr))'). Omitted when unset. |
rows | number | string | — | grid-template-rows. A number (or a bare-numeric string) is a count of equal repeat(<n>, minmax(0, 1fr)) tracks; any other string is a verbatim value. Omitted when unset. |
areas | string | string[] | — | grid-template-areas. A string array is auto-quoted per row (['a b', 'c d'] → "a b" "c d"); a string is used verbatim (must already carry its own quotes). Omitted when unset. |
gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string | — | Spacing between tracks (gap). A named t-shirt step ('xs'–'xl', --bankai-gap-<name>) or a number/bare-numeric string (a rem-based --bankai-space-<n> step); any other string is a verbatim CSS length ('1rem', '1rem 2rem', 'clamp(…)'). Omitted when unset. |
flow | 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense' | — | grid-auto-flow — direction the grid auto-places items. Omitted when unset (browser default row). |
align | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | (string) | — | In-cell block-axis alignment (align-items). A native keyword (BankaiGridAlign) reflects as data-bankai-align; any other string is a verbatim align-items value. Omitted when unset. |
justify | 'start' | 'end' | 'center' | 'stretch' | (string) | — | In-cell inline-axis alignment (justify-items). A native keyword (BankaiGridJustify) reflects as data-bankai-justify; any other string is a verbatim justify-items value. Omitted when unset. |
inline | boolean | false | Render as inline-grid instead of grid. |
Emits
This component emits no events.
Slots
| Slot | Description |
|---|---|
default | Grid children. |
Exposes
This component exposes nothing on its instance.
Theming
This component defines no theme tokens — its styling is driven by props and utility classes.