Grid
Grid
<Grid columns={3} gap={4}>...</Grid><Grid columns="repeat(auto-fit, minmax(240px, 1fr))" gap={6}>...</Grid>Install: @helixui/core
import { Grid } from '@helixui/core'status: stable · since: 0.1.0
Tags: primitive, grid, columns, rows
Anatomy
[ . ][ . ][ . ][ . ][ . ][ . ] ← columns/rows tunableLayout
- display —
grid - width —
auto - height —
auto - intrinsicSize —
CSS grid container, tunable tracks - stackable —
true - fullBleed —
false
Visual
A CSS grid container. Pass a number for equal columns, or any raw grid-template-columns track string. Token-aware gaps.
Props
| Name | Type | Default | Description |
|---|---|---|---|
columns | number | string | — | Equal columns when number; raw grid-template-columns when string. |
rows | number | string | — | Same shape, applied to rows. |
gap | number | string | — | Cell gap. Numeric → space.N token. |
rowGap | number | string | — | Row gap override. |
columnGap | number | string | — | Column gap override. |
inline | boolean | false | Use inline-grid. |
Tokens used
space.2, space.4, space.6
Accessibility
Notes
- Presentational. Use semantic elements as children.
Composes with
| Component | Relation | Note |
|---|---|---|
Flex | alternative | Use Flex for 1-D layout. |
Stack | alternative | Use Stack for vertical/horizontal stacking with consistent gap. |
Box | sibling |
Prompt examples
These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.
three-column responsive grid
“3 column grid with 24px gap”
<Grid columns={3} gap={6}>{cards}</Grid>auto-fit gallery
“auto-fitting tiles min 240px”
<Grid columns="repeat(auto-fit, minmax(240px, 1fr))" gap={6}>{items}</Grid>