Component reference
Grid
Lays out children in responsive columns.
Preview
Parallel work
Parallel items arrange by available width; narrow containers fall back to a single column without hiding long titles.
render: () => (
<Measure width="wide">
<Grid gap="relaxed">
<Stack gap="compact" align="start">
<Status state="success" label="Completed" />
<strong>Search result order and stale request handling</strong>
<span>Keep newer results and ignore older ones that arrive late.</span>
<Button variant="outline">View changes</Button>
</Stack>
<Stack gap="compact" align="start">
<Status state="warning" label="Needs review" />
<strong>Code reading and source checks in narrow-screen conversations</strong>
<span>Code scrolls locally while the body stays readable.</span>
<Button variant="outline">View record</Button>
</Stack>
</Grid>
</Measure>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { Grid } from "meowtail";
<Grid gap="relaxed">
<Stack gap="compact" align="start">
<Status state="success" label="Completed" />
<strong>Search result order and stale request handling</strong>
<span>Keep newer results and ignore older ones that arrive late.</span>
<Button variant="outline">View changes</Button>
</Stack>
<Stack gap="compact" align="start">
<Status state="warning" label="Needs review" />
<strong>Code reading and source checks in narrow-screen conversations</strong>
<span>Code scrolls locally while the body stays readable.</span>
<Button variant="outline">View record</Button>
</Stack>
</Grid>API reference
Props
| Prop | Type | Default |
|---|---|---|
gap | "none" | "compact" | "normal" | "relaxed" | "normal" |
rowGap | "auto" | "none" | "compact" | "normal" | "relaxed" | "auto" |
columnGap | "auto" | "none" | "compact" | "normal" | "relaxed" | "auto" |
minColumnWidth | "compact" | "normal" | "wide" | "normal" |
as | LayoutElement | "div" |
align | LayoutAlign | "stretch" |
columns | "auto" | 1 | 2 | 3 | 4 | "auto" |
Also takes className, children and the attributes and events of its root element.
DOM parts
root
Registry
The component is registered as grid in the meowtail component registry.