Grid

Responsive grid layout with container query support.

import { Grid } from 'ui-lab-components/grid';

Layout Preset

Columns3

Gap TokenMedium

Justify Items

Align Items

Auto Flow

Items6

import { Grid } from 'ui-lab-components/grid';
 
export default function Example() {
  return (
    <Grid columns={3} gap="md" justifyItems="stretch" align-stretch autoFlow="row">
      <div className="h-24 w-full rounded-sm bg-background-800" />
      <div className="h-24 w-full rounded-sm bg-background-800" />
      <div className="h-24 w-full rounded-sm bg-background-800" />
      <div className="h-24 w-full rounded-sm bg-background-800" />
      <div className="h-24 w-full rounded-sm bg-background-800" />
      <div className="h-24 w-full rounded-sm bg-background-800" />
    </Grid>
  );
}

grid/01-responsive-feature

A minimal feature section that uses auto-fit tracks to adapt cards to the available page width.

"use client";
 
import type { CSSProperties } from 'react';
import { Grid } from 'ui-lab-components/grid';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style }: { label: number; style?: CSSProperties }) {
  return (
    <Frame className="p-2" pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Grid columns="auto-fit" gap="md" className="w-full max-w-3xl">
      {Array.from({ length: 3 }, (_, index) => (
        <FrameCell key={index} label={index + 1} style={{ width: '100%', height: 180 }} />
      ))}
    </Grid>
  );
}

grid/02-track-placement

Adjust columns, gap, alignment, and auto-placement flow to explore the CSS Grid track model.

"use client";
 
import type { CSSProperties } from 'react';
import { Grid } from 'ui-lab-components/grid';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
const cells: CSSProperties[] = [
  { minHeight: '9rem', gridRow: 'span 2' },
  { minHeight: '5rem', gridColumn: 'span 2' },
  { minHeight: '3rem' },
  { minHeight: '3rem' },
  { minHeight: '6rem', gridColumn: 'span 2' },
  { minHeight: '3rem' },
];
 
function FrameCell({ label, style }: { label: number; style?: CSSProperties }) {
  return (
    <Frame className="w-full h-full p-2" pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Grid columns={3} gap="md" justifyItems="stretch" align-stretch autoFlow="row" className="w-full">
      {cells.map((style, index) => (
        <FrameCell key={index} label={index + 1} style={style} />
      ))}
    </Grid>
  );
}

grid/03-dashboard-metrics

A responsive overview row that moves from one to four metric cards as space becomes available.

"use client";
 
import type { CSSProperties } from 'react';
import { Grid } from 'ui-lab-components/grid';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style }: { label: number; style?: CSSProperties }) {
  return (
    <Frame className="p-2" pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Grid
      columns={{ sm: 1, md: 2, lg: 4 }}
      gap={{ sm: 'sm', md: 'md' }}
      className="w-full max-w-4xl"
    >
      {Array.from({ length: 4 }, (_, index) => (
        <FrameCell key={index} label={index + 1} style={{ width: '100%', height: 144 }} />
      ))}
    </Grid>
  );
}

grid/04-app-shell

A compact application shell with a spanning header, navigation rail, and nested content grid.

"use client";
 
import type { CSSProperties } from 'react';
import { Grid } from 'ui-lab-components/grid';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style, className }: { label: number; style?: CSSProperties; className?: string }) {
  return (
    <Frame className={`p-2 ${className ?? ''}`} pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Grid columns="10rem minmax(0, 1fr)" gap="sm" className="w-full max-w-3xl">
      <FrameCell label={1} className="col-span-2" style={{ width: '100%', height: 48 }} />
      <FrameCell label={2} style={{ width: '100%', height: 220 }} />
      <Grid columns={2} gap="sm">
        <FrameCell label={3} style={{ width: '100%', height: 80 }} />
        <FrameCell label={4} style={{ width: '100%', height: 80 }} />
        <FrameCell label={5} className="col-span-2" style={{ width: '100%', height: 128 }} />
      </Grid>
    </Grid>
  );
}

grid/05-article-sidebar

A reading layout that shifts from a single column to custom article and table-of-contents tracks.

"use client";
 
import type { CSSProperties } from 'react';
import { Grid } from 'ui-lab-components/grid';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style }: { label: number; style?: CSSProperties }) {
  return (
    <Frame className="p-2" pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Grid
      columns={{ sm: 1, lg: 'minmax(0, 1fr) 13rem' }}
      gap={{ sm: 'lg', lg: 'xl' }}
      align-start
      className="w-full max-w-3xl"
    >
      <FrameCell label={1} style={{ width: '100%', height: 280 }} />
      <FrameCell label={2} style={{ width: '100%', height: 160 }} />
    </Grid>
  );
}

grid/06-bento-highlights

A four-column highlight grid using explicit row and column spans for visual hierarchy.

"use client";
 
import type { CSSProperties } from 'react';
import { Grid } from 'ui-lab-components/grid';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style, className }: { label: number; style?: CSSProperties; className?: string }) {
  return (
    <Frame className={`p-2 ${className ?? ''}`} pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Grid columns={4} rows="2" gap="sm" className="w-full max-w-3xl">
      <FrameCell label={1} className="col-span-2 row-span-2" style={{ width: '100%', height: 240 }} />
      <FrameCell label={2} className="col-span-2" style={{ width: '100%', height: 112 }} />
      <FrameCell label={3} style={{ width: '100%', height: 112 }} />
      <FrameCell label={4} style={{ width: '100%', height: 112 }} />
    </Grid>
  );
}

Layout

Composition

Action

Input

Information

Feedback

Navigation

Container

Display

Media