Components
Grid
A CSS grid layout primitive with named column counts and Cognition spacing tokens. Replaces inline grid utilities across the codebase.
Preview
Cell one
Cell two
Cell three
Cell four
Cell five
Cell six
Column counts
col
<Grid cols={1} gap="sm">col
col
<Grid cols={2} gap="sm">col
col
col
<Grid cols={3} gap="sm">col
col
col
col
<Grid cols={4} gap="sm">API
Prop
Type
Default
Description
cols1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 121Number of grid columns.gap"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—Gap between all cells. Maps to the Cognition spacing scale.gapX"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—Column gap only. Overrides gap on the x axis.gapY"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—Row gap only. Overrides gap on the y axis.Don't and Do
Don't
Don't hand-write grid utilities inline. Column counts and gap values set that way sit outside the token system and accumulate as drift across the codebase.
Do
// Grid with Cognition tokens
<Grid cols={3} gap="lg">
<div>Cell one</div>
<div>Cell two</div>
<div>Cell three</div>
</Grid>Usage
import { Grid } from "@/components/ui/grid";
export function Example() {
return (
<Grid cols={3} gap="md">
<div>Cell one</div>
<div>Cell two</div>
<div>Cell three</div>
</Grid>
);
}Cognition v1.3 · June 2026 · Questions? Ask Tony Yates #research-and-design