Mushilu-San UI Grid
Lays out children in a fixed number of equal columns, with gaps between them.
Selector: mui-grid
import { Grid } from '@mushilu-san/ui/layout';Loading example…
Overview
columns equal tracks. gap sets both gaps in spacing steps, and columnGap or rowGap override one axis. align and justify set how items sit inside their cells.
When to use
A set of cards or tiles that should line up in columns. A dashboard with equal-width panels.
When not to use
A single row or column of items. Use a Stack. Use Stack instead.
Guidelines
Do
Use fewer columns on narrow screens, such as 1 or 2, so each item keeps a readable width.
Don't
Do not use a grid to fake a table. Use a Table.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — |
Keep the DOM order the same as the reading order. Do not rely on CSS to reorder items for screen readers.
API
Grid
| Name | Type | Default | Description |
|---|---|---|---|
columns | number | 1 | Number of equal-width columns (uses `repeat(n, minmax(0, 1fr))`). |
gap | number | 4 | Gap applied to both axes — a step on the spacing scale (--mui-space-{n}). Overridden by columnGap/rowGap. |
columnGap | number | undefined | undefined | Column gap override — a step on the spacing scale (--mui-space-{n}). |
rowGap | number | undefined | undefined | Row gap override — a step on the spacing scale (--mui-space-{n}). |
align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Block-axis alignment of grid items (align-items). |
justify | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Inline-axis alignment of grid items (justify-items). |
CSS parts
::part(root)
Tokens
--mui-space-4