Layout
Grid
CSS-grid layout primitive with token-mapped columns, rows and gap.
A CSS-grid layout primitive. columns, rows, gap, align and padding map to literal Tailwind classes via static maps (so the compiler always emits them). Purely presentational; as changes the rendered tag.
Import
import { Grid } from "@yuhuanowo/yunui";
Columns
3 columns
1
2
3
4
5
6
Gap
2 columns, wider gap
A
B
Responsive
Grid sets a fixed column count; for responsive layouts combine it with Tailwind responsive utilities through className, or swap to raw grid-cols-* classes.
Stat tiles
metric
1.2k
metric
48k
metric
3
metric
72.4
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "center" | "start" | "end" | "stretch" | "baseline" | — | Cross-axis alignment of items within their cells (`align-items`). |
| as | ElementType<any, keyof IntrinsicElements> | — | Element/tag to render as. |
| columns | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 7 | 9 | 11 | — | Number of equal columns (1–12). |
| gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 4 | Gap between cells, on the spacing scale. |
| padding | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | — | Padding on all sides, on the spacing scale. |
| responsive | boolean | true | Stack into fewer columns on small screens (mobile-first ramp) instead of a literal `grid-cols-N` at every width. |
| rows | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 7 | 9 | 11 | — | Number of explicit rows (1–12). |