Components
Grid
A CSS grid layout primitive with named column counts and Folio spacing tokens. Replaces inline grid utilities across the codebase. Grid is Folio-only: it lives in components/folio, not components/shadcn.
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 Folio 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 Folio tokens
<Grid cols={3} gap="lg">
<div>Cell one</div>
<div>Cell two</div>
<div>Cell three</div>
</Grid>Usage
import { Grid } from "@/components/folio/grid";
export function Example() {
return (
<Grid cols={3} gap="md">
<div>Cell one</div>
<div>Cell two</div>
<div>Cell three</div>
</Grid>
);
}Folio v1.3 · June 2026