Grid

Responsive grid layout with container query support.

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

grid/01-responsive-feature-grid

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

Loading interactive preview
import { Grid } from "ui-lab-components/grid";
import { Skeleton } from "ui-lab-components/skeleton";
 
export default function Example() {
  return (
    <Grid columns="auto-fit" gap="md" className="w-full max-w-3xl">
      {Array.from({ length: 3 }, (_, index) => (
        <Skeleton key={index} w="100%" h={180} />
      ))}
    </Grid>
  );
}

grid/03-dashboard-metrics

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

Loading interactive preview
import { Grid } from "ui-lab-components/grid";
import { Skeleton } from "ui-lab-components/skeleton";
 
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) => (
        <Skeleton key={index} w="100%" h={144} />
      ))}
    </Grid>
  );
}

grid/04-app-shell

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

Loading interactive preview
import { Grid } from "ui-lab-components/grid";
import { Skeleton } from "ui-lab-components/skeleton";
 
export default function Example() {
  return (
    <Grid columns="10rem minmax(0, 1fr)" gap="sm" className="w-full max-w-3xl">
      <Skeleton w="100%" h={48} className="col-span-2" />
      <Skeleton w="100%" h={220} />
      <Grid columns={2} gap="sm">
        <Skeleton w="100%" h={80} />
        <Skeleton w="100%" h={80} />
        <Skeleton w="100%" h={128} className="col-span-2" />
      </Grid>
    </Grid>
  );
}

grid/05-article-sidebar

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

Loading interactive preview
import { Grid } from "ui-lab-components/grid";
import { Skeleton } from "ui-lab-components/skeleton";
 
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"
    >
      <Skeleton w="100%" h={280} />
      <Skeleton w="100%" h={160} />
    </Grid>
  );
}

grid/06-bento-highlights

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

Loading interactive preview
import { Grid } from "ui-lab-components/grid";
import { Skeleton } from "ui-lab-components/skeleton";
 
export default function Example() {
  return (
    <Grid columns={4} rows="2" gap="sm" className="w-full max-w-3xl">
      <Skeleton w="100%" h={240} className="col-span-2 row-span-2" />
      <Skeleton w="100%" h={112} className="col-span-2" />
      <Skeleton w="100%" h={112} />
      <Skeleton w="100%" h={112} />
    </Grid>
  );
}
UI Lab