Grid

CSS Grid layout with configurable columns, gaps, and alignment; every visual prop accepts a responsive object keyed by breakpoint. Compose column spans with GridCol children.

Red

Amber

Green

Teal

Blue

Violet

Usage

import { Grid, GridCol, GridColProps, GridProps } from "@desk/ui/components/grid";

Best practices

Grid gives full 2-D control — compose GridCol children with span/start/order; if you only need equal-width responsive columns, SimpleGrid is lighter.
columns, gap, and alignment each accept a per-breakpoint object; responsiveMode="container" resolves them against the nearest container query.

Props

Grid

Prop	Type	Description
align	`ResponsiveValue<FlexAlign>`	Align items on the block axis. Can be responsive.
columns	`ResponsiveValue<number>`	Total columns in the layout. Can be a number or responsive object. Defaults to 12.
gap	`ResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`	Gap between items. Can be responsive. Defaults to "base" (16px).
grow	`boolean`	When true, columns grow equally to fill available space.
justify	`ResponsiveValue<FlexJustify>`	Justify items on the inline axis. Can be responsive.
responsiveMode	`ResponsiveMode`	Responsive mode: "screen" (viewport) or "container" (container queries).
xGap	`ResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`	Horizontal gap between items. Can be responsive. Overrides gap on inline axis.
yGap	`ResponsiveValue<"base" \| "none" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "3xs">`	Vertical gap between items. Can be responsive. Overrides gap on block axis.

GridCol

Prop	Type	Description
order	`ResponsiveValue<OrderValue>`	CSS order value (1-12, "first", "last", "none"). Can be responsive.
responsiveMode	`ResponsiveMode`	Responsive mode: "screen" (viewport) or "container" (container queries).
span	`ResponsiveValue<number>`	Number of columns this item spans. Can be responsive.
start	`ResponsiveValue<number>`	Column start position (1-based). Can be responsive.

Also exports

interfaceGridColProps
interfaceGridProps