Components
Grid
A responsive CSS grid layout container. Five breakpoint-aware sizes map to standard column counts (4, 8, or 12) with horizontal margins.
Overview
Grid provides a CSS display: grid container with a predefined column count and gap based on the size prop. It is not a full responsive grid system — it sets the container's column count for a given viewport range. Use GridItem inside Grid to place items across those columns.
Import
import { Grid } from '@unflow/ui/components/Grid';
import { GridItem } from '@unflow/ui/components/GridItem';Props
Grid
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xs' | Column count variant |
GridItem
| Prop | Type | Default | Description |
|---|---|---|---|
col | number | — | Number of columns to span |
row | number | — | Number of rows to span |
Column layout
col=4
col=4
col=4
col=6
col=6
col=12 (full width)
<Grid size="md">
<GridItem col={4}>A</GridItem>
<GridItem col={4}>B</GridItem>
<GridItem col={4}>C</GridItem>
<GridItem col={6}>Left half</GridItem>
<GridItem col={6}>Right half</GridItem>
<GridItem col={12}>Full width</GridItem>
</Grid>Size variants
size="xs" — 4 columns
1
1
1
1
size="md" — 12 columns
3
3
3
3
| Size | Columns | Use case |
|---|---|---|
xs | 4 | Mobile — narrow single-column layouts |
sm | 8 | Small tablet — 2-column layouts |
md | 12 | Desktop default — standard 12-column grid |
lg | 12 | Large desktop — same columns, wider margins |
xl | 12 | Extra-wide — same columns, maximum margins |
Notes
- Grid uses
display: gridwithgrid-template-columns: repeat(N, 1fr)where N is determined bysize. colon GridItem setsgrid-column: span {col}.- Customization is via
classNameonly — no prop API beyondsize/col/row. - The grid doesn't automatically switch column counts at breakpoints — use separate
Gridcomponents inside responsive containers for adaptive layouts.
Accessibility
Grid is a layout primitive — it has no semantic role beyond the <div> it renders. Ensure the content order in source matches the visual reading order, as CSS grid can reorder items visually without changing DOM order (which affects screen readers).