Grid
12 columns
Two blocks of six columns each in a grid-cols-12 grid.
6
6
tsx
import { Grid } from "~/components/ui/base/grid";
<Grid columnsClass="grid-cols-12" gap={4} class="w-full max-w-3xl">
<div class="col-span-6 rounded-lg bg-surface-raised p-4 text-callout">6</div>
<div class="col-span-6 rounded-lg bg-surface-overlay p-4 text-callout">6</div>
</Grid>
Responsive
Resizable + a grid in each panel with repeat(auto-fill, minmax(8rem, 1fr)) — the number of columns depends on the panel width.
Left 1
Left 2
Left 3
Left 4
Right 1
Right 2
Right 3
Right 4
tsx
import { Grid } from "~/components/ui/base/grid";
import { Resizable } from "~/components/ui/base/resizable";
<Resizable.PanelGroup
direction="horizontal"
defaultSplit={50}
class="h-64 w-full rounded-lg border border-separator-opaque/40"
>
<Resizable.Panel side="start" minSize={22} class="p-3">
<Grid columnsClass="grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]" gap={3} class="h-full min-h-0 w-full">
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Left 1</div>
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Left 2</div>
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Left 3</div>
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Left 4</div>
</Grid>
</Resizable.Panel>
<Resizable.Handle withHandle />
<Resizable.Panel side="end" minSize={22} class="p-3">
<Grid columnsClass="grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]" gap={3} class="h-full min-h-0 w-full">
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Right 1</div>
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Right 2</div>
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Right 3</div>
<div class="min-h-12 min-w-0 w-full rounded-lg border border-separator-opaque/40 p-3 text-center text-callout">Right 4</div>
</Grid>
</Resizable.Panel>
</Resizable.PanelGroup>
Metadata
Source: meta.generated.json (see npm run generate)
File base/grid/meta.generated.json not found or path not allowed.