Components / Grid
Grid
CSS-grid layout primitive with declarative columns, gap, and alignment. Use `min-column` for responsive auto-fill wrapping. Shares cg-stack's gap scale.
layoutv0.8.0
Playground
Examples
3-column grid
<cg-grid columns="3" gap="md"><cg-card>1</cg-card><cg-card>2</cg-card><cg-card>3</cg-card><cg-card>4</cg-card><cg-card>5</cg-card><cg-card>6</cg-card></cg-grid>Responsive auto-fill
<cg-grid min-column="180px" gap="md"><cg-card>A</cg-card><cg-card>B</cg-card><cg-card>C</cg-card><cg-card>D</cg-card></cg-grid>Two columns
<cg-grid columns="2" gap="lg"><cg-card>Left</cg-card><cg-card>Right</cg-card></cg-grid>Import
import { CgGrid } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-grid';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | 1 | Number of equal columns |
min-column | string | "" | Responsive: auto-fill columns of at least this min-width (overrides columns) |
gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Gap between cells |
align | "start" | "center" | "end" | "stretch" | "stretch" | Align items (block axis) |
justify | "start" | "center" | "end" | "stretch" | "stretch" | Justify items (inline axis) |
full | boolean | false | Stretch to full width |