Skip to content
← Inventory

SimpleGrid

Equal-width column grid built on CSS Grid. cols and gap accept a single value or a per-breakpoint responsive object like { base: 1, md: 3 }; set responsiveMode to "container" to resolve breakpoints against the nearest container instead of the viewport.

01
02
03
04

Usage

import { SimpleGrid, SimpleGridProps } from "@desk/ui/components/simple-grid";

Best practices

  • SimpleGrid lays out equal-width columns — set cols (responsive, e.g. { base: 1, md: 3 }); when you need column spans or ordering, step up to Grid.

Props

PropTypeDefaultDescription
colsResponsiveValue<number>3

Number of equal-width columns. Accepts a per-breakpoint responsive object.

gapResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">"base"

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

Also exports

  • interfaceSimpleGridProps