Arranges items into responsive columns with one shared gap.
import { Grid } from "@/fragments/ui";Sourceimport { Box } from '@/components/Box';
import { Grid } from '@/components/Grid';
<Box width="100%">
<Grid columns={3} gap="md">
<Box background="secondary" rounded="sm" padding="sm">One</Box>npx @usefragments/cli add gridWrites src/fragments/ui/components/Grid plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Column count changes per breakpoint.
import { Box } from '@/components/Box';
import { Grid } from '@/components/Grid';
<Box width="100%">
<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="md">
<Box background="secondary" rounded="sm" padding="sm">Card 1</Box>Columns fit themselves to a minimum child width — no breakpoints needed.
import { Box } from '@/components/Box';
import { Grid } from '@/components/Grid';
<Box width="100%">
<Grid columns="auto" minChildWidth="10rem" gap="md">
<Box background="secondary" rounded="sm" padding="sm">Card 1</Box>Grid.Item stretches a child across columns.
import { Box } from '@/components/Box';
import { Grid } from '@/components/Grid';
<Box width="100%">
<Grid columns={4} gap="md">
<Grid.Item colSpan={2}>Paired fields with one full-width row.
import { Box } from '@/components/Box';
import { Field } from '@/components/Field';
import { Grid } from '@/components/Grid';
import { Input } from '@/components/Input';
<Box width="100%">Prop | Type | Default | Description |
|---|---|---|---|
children | node | Not set | Grid items and content |
columns | union | 1 | Number of columns: a number (1-12), a responsive object { base, sm, md, lg, xl }, or "auto" for auto-fill |
minChildWidth | string | Not set | Minimum width for auto-fill columns (e.g., "16rem", "250px") |
gap | unionnonexssmmdlgxl | md | Gap between grid items. Accepts string tokens or numbers (1-8) mapped to the spacing scale |
alignItems | enumstartcenterendstretch | Not set | Vertical alignment of items within their cells |
justifyItems | enumstartcenterendstretch | Not set | Horizontal alignment of items within their cells |
padding | enumnonesmmdlg | none | Internal padding of the grid container |
className | string | Not set | Additional class name |
style | object | Not set | Inline styles |