BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Grid

Stable
Edit in Studio

Two-dimensional layout with token gaps: a fixed number of equal columns, or as many columns as fit for card and tile grids.

Updated Oct 16, 2026

Rendered with the real component
Light
123456
Dark
123456

When to use

Use it for

  • Card and tile grids: minItemWidth makes them responsive without breakpoints.
  • Dashboards and settings layouts with a fixed column count.
  • render={<ul />} when the cells are a list of items.

Not for

  • Tabular data with headers: use Table.
  • A single row or column: use Inline or Stack.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

TileTileTile
Do

Prefer minItemWidth for tiles

Tiles reflow from four columns to one as space shrinks, with no media queries.

123456
Don't

Many fixed columns on small screens

Twelve fixed columns at phone width make unreadable slivers. Use minItemWidth or fewer columns.

Accessibility

  • A plain div by default with no role; it is not a data grid. Use Table for data.
  • Cells flow in DOM order, so reading and tab order follow the visual order row by row.

Anatomy and tokens

Read from packages/react/src/components/Grid/Grid.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

1 tokens 0 semantic or component, change with theme and brand 1 density, change with comfortable or compact 0 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Grid/Grid.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.

Prop Type Default Description
columns number 1 Fixed number of equal columns (1 to 12). Ignored when minItemWidth is set. Default 1.
minItemWidth '60' | '72' | '80' | '96' | '120' none Responsive columns: as many as fit, each at least this size token wide (`80` = 320px). Use this instead of breakpoints for card and tile grids.
gap SpaceToken none Space between cells, a key of the space scale. Default: the density token `layout.gap`.
render ReactElement none Render another element, for example `<ul />`.

Playground

Change the props and see the real Grid update. Controls are generated from the TypeScript props; nothing here changes the system. 

<Grid minItemWidth="60" gap="3" />
minItemWidth

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Grid in Storybook) .

Embed Storybook stories here (2)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

AllStates

Changelog

  • New

    Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters). Gaps only accept space-scale keys.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes