Grid
Dialog
Field
Alert
Badge
Stack
Grid
Grid arranges children into columns that wrap, with a gap from the spacing
scale. Use it for card grids and dashboards; use Stack
for a single row or column.
Usage
import { Grid } from "@sina-design-system/core";
<Grid cols={3} gap={4}>
{items.map((i) => <Card key={i.id} {...i} />)}
</Grid>Examples
Columns
Cell 1
Cell 2
Cell 3
Cell 4
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 7
Cell 8
Gap · on-system steps
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | GridCols | — | Number of columns. |
gap | GapStep | — | Spacing between cells (from the 8pt scale). |
as | ElementType | — | Render as a different element (polymorphic). |
Accessibility
Purely presentational. It renders a plain div with no added semantics. Pass
as to keep meaningful structure when the cells are a real collection
(e.g. as="ul").