I9kGrid

CSS grid layout wrapper with a fixed 1/2/3-column or auto-filling track and a size-driven gap. Collapses to one column on narrow viewports.

View as MarkdownView source

import { I9kGrid } from '@9klabs/design';

Examples

Columns

Two

columns

Three

equal

columns

Auto

fill

<I9kGrid :columns="2"><I9kPanel size="sm">Two</I9kPanel><I9kPanel size="sm">columns</I9kPanel></I9kGrid>
<I9kGrid :columns="3"><I9kPanel size="sm">Three</I9kPanel><I9kPanel size="sm">equal</I9kPanel><I9kPanel size="sm">columns</I9kPanel></I9kGrid>
<I9kGrid columns="auto"><I9kPanel size="sm">Auto</I9kPanel><I9kPanel size="sm">fill</I9kPanel></I9kGrid>

Sizes

Small

gap

Large

gap

<I9kGrid :columns="2" size="sm"><I9kPanel size="sm">Small</I9kPanel><I9kPanel size="sm">gap</I9kPanel></I9kGrid>
<I9kGrid :columns="2" size="lg"><I9kPanel size="sm">Large</I9kPanel><I9kPanel size="sm">gap</I9kPanel></I9kGrid>

Watch out

• size sets the gap only — it has no effect on column count or track width, so pick columns via columns.
• columns="auto" fills as many 280px-minimum tracks as fit; it is not the same as a fixed column count.
• Every multi-column value (2, 3, auto) collapses to a single column at viewports under 768px.

API

Props

Prop	Type	Default	Required
as	string | Component	'div'	no
columns	1 | 2 | 3 | 'auto'	1	no
size	'sm' | 'md' | 'lg'	'md'	no

Slots

• default

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kGrid from @9klabs/design to lay out a set of cards or panels in a responsive grid.

import { I9kGrid } from '@9klabs/design';

Props:
- as?: string | Component (default 'div') — the rendered root tag or component.
- columns?: 1 | 2 | 3 | 'auto' (default 1)
- size?: 'sm' | 'md' | 'lg' (default 'md') — sets the gap between tracks only; it does not affect column count or track width.

Emits: none.

Slots: default — the grid items. Each direct child occupies one cell; wrap items yourself (e.g. in I9kPanel) if they need their own padding or surface.

Column behavior: `columns={1|2|3}` renders that many equal-width tracks (`repeat(n, minmax(0, 1fr))`). `columns="auto"` renders `repeat(auto-fill, minmax(280px, 1fr))` — as many equal tracks as fit at a 280px minimum, wrapping to new rows as the container narrows, with no JS breakpoint logic involved. Below a 768px viewport, every multi-column value (2, 3, and 'auto') collapses to a single column; `columns={1}` is already one column and is unaffected.

IMPORTANT: `size` only changes the gap (sm/md/lg spacing tokens) — pick the column count with `columns`, not `size`.

Usage:
<I9kGrid :columns="3" size="md"><I9kPanel>One</I9kPanel><I9kPanel>Two</I9kPanel><I9kPanel>Three</I9kPanel></I9kGrid>