Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Primitives
  2. Grid
  3. API and Development

Grid

API and Development

View Source
Submit Issue

Grid wraps Radix UI Themes Grid with design-token backgrounds, borders, elevation, and useSpacing for margin, padding, and gap. It extends BoxProps (minus flex-only props) with columns, rows, areas, flow (GridFlow), align (GridAlign), justify (GridJustify), display (GridDisplay), and useContainerQueries for responsive column templates tied to container width.

Key props

Name

Type

Default

Description

columns

Radix columns | responsive

—

Track template or counts.

rows

string

—

Row template.

flow

GridFlow

—

Auto-placement flow.

align

GridAlign

—

Align items.

justify

GridJustify

—

Justify content.

gap

Spacing

—

Gap spacing scale.

useContainerQueries

boolean

false

Container-based breakpoints.

See GridProps in @prepared911/ui-core for the full surface (background, border, attach*, overflow, zIndex, etc.).

The previews below mirror the Grid stories in Storybook (Default, Columns, Rows, GridFlowStory, Alignment, MasonryBasic).

Default

Columns

Rows

Grid flow

Alignment

Masonry layout

Previous

Grid / Usage

Next

Grid / Accessibility

On this page

Key props
Default
Columns
Rows
Grid flow
Alignment
Masonry layout