Layout@knitui/components

SimpleGrid

SimpleGrid renders equal-width columns using a flex-wrap row layout. Use cols for a fixed column count or minColWidth for auto-fill behaviour. Gap between cells is controlled by spacing (columns) and verticalSpacing (rows).

WebiOSAndroid1 style slots8 own props8 examples

Stories Source Tests Open in Storybook

import { SimpleGrid } from "@knitui/components";

Playground

Loading playground…

colsNumber of equal columns (ignored when `minColWidth` is set).

spacingGap between columns — space key, `$space` token, or raw px number.

verticalSpacingGap between rows; falls back to `spacing` when unset.

minColWidthMinimum column width in px. When set, `cols` is ignored and columns auto-fill.

autoFlowFill behaviour for `minColWidth` mode.

Playground

<SimpleGrid
  cols={3}
  spacing="md"
/>

Examples

Column Counts

Fixed column count — two, three and four columns, each wrapping six cells.

Loading example…

Column CountsSource Storybook

Spacing Scale

Spacing scale — all seven space keys applied to the same 3-column grid.

Loading example…

Spacing ScaleSource Storybook

Asymmetric Spacing

Independent vertical spacing — rows use "xl" while columns stay at "sm".

Loading example…

Asymmetric SpacingSource Storybook

Min Col Width

minColWidth mode — columns auto-fill at ≥ 160 px; resize the canvas to see them reflow.

Loading example…

Min Col WidthSource Storybook

Auto Fit Vs Fill

auto-fit vs auto-fill — auto-fit stretches the last row to fill; auto-fill leaves gaps.

Loading example…

Auto Fit Vs FillSource Storybook

Empty

Renders correctly with no children — the grid frame is present but empty.

Loading example…

EmptySource Storybook

Styles

Per-slot styles targets individual parts — here the cell wrapper around each child.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`autoFlow`	`"auto-fit" \| "auto-fill" \| undefined` auto-fill · auto-fit	`"auto-fill"`	Fill behaviour for `minColWidth` mode.
`autoRows`	`string \| undefined`	—	Implicit-row sizing — a web CSS-grid concept with no cross-platform flex equivalent. Accepted for Mantine parity; documented no-op.
`children`	`ReactNode`	—
`cols`	`number \| undefined`	`1`	Number of equal columns (ignored when `minColWidth` is set).
`disabled` system	`boolean \| undefined`	—
`minColWidth`	`string \| number \| undefined`	—	Minimum column width in px. When set, `cols` is ignored and columns auto-fill.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`spacing`	`SimpleGridSpacing \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"md"`	Gap between columns — space key, `$space` token, or raw px number.
`styles` system	`SlotStyles<SimpleGridStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`type`	`"media" \| "container" \| undefined`	—	Responsive query type. Accepted for Mantine parity; our layout is single-value, so this is a documented no-op.
`verticalSpacing`	`SimpleGridSpacing \| undefined` unset · xxs · xs · sm · md · lg · xl · xxl	—	Gap between rows; falls back to `spacing` when unset.

Style slots

Every part of SimpleGrid can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`cell`	`styles={{ cell: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 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.