Layout@knitui/components
Grid
Grid is a 12-column flex-wrap grid that mirrors Mantine's Grid + Grid.Col. Columns size to span / columns as a percentage; gutter controls the track gap. Compose Grid > Grid.Col — each col accepts span, offset, order, and align (vertical self-alignment). Responsive per-breakpoint span objects are deferred by design.
import { Grid } from "@knitui/components";Playground
Loading playground…
<Grid
columns={12}
gutter="md"
grow={false}
/>Examples
Basic Spans
Classic 12-column span combinations: 12, 6+6, 4+4+4, 3+3+3+3.
Loading example…
Gutters
All gutter sizes from xxs to xxl, keeping the column layout identical.
Loading example…
Auto And Content Span
span="auto" fills remaining row space; span="content" shrinks to fit content.
Loading example…
Column Offset
offset pushes a column right by N columns without occupying the space.
Loading example…
Grow Columns
grow lets shorter last-row columns expand to fill the track.
Loading example…
Column Alignment
Grid.Col align controls vertical self-alignment within a mixed-height row.
Loading example…
Custom Column Count
Custom columns count — a 24-column grid allows finer-grained layouts.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | undefined | 12 | Total columns the grid is divided into. |
disabled system | boolean | undefined | — | |
grow | boolean | undefined | false | Let columns grow to fill the last row. |
gutter | GridGutter | undefinedxxs · xs · sm · md · lg · xl · xxl | "md" | Space between columns — a space key (xxs–xxl), `$space` token, or px number. |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 500 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.