Grid

Responsive columns and explicit CSS tracks for cards, settings and content layouts.

Grid

View source · API reference

A responsive card grid

One column becomes two at sm and three at lg. Cards stretch to share the row height.

01

Content

Write structured pages in MDX.

02

Components

Compose reusable interfaces with typed props.

03

Theme

Keep every surface consistent.

<Grid columns="1" columnsSm="2" columnsLg="3">
  <Panel bodyClass="p-3">
    <Badge tone="accent">01</Badge>
    <h3>Content</h3>
    <p>Write structured pages in MDX.</p>
  </Panel>
  <Panel bodyClass="p-3">
    <Badge tone="info">02</Badge>
    <h3>Components</h3>
    <p>Compose reusable interfaces with typed props.</p>
  </Panel>
  <Panel bodyClass="p-3">
    <Badge tone="success">03</Badge>
    <h3>Theme</h3>
    <p>Keep every surface consistent.</p>
  </Panel>
</Grid>

Content and action tracks

A minmax track lets long content shrink; the action keeps its natural width when the viewport allows it.

Ready to compose?

Use explicit tracks when equal widths are not the right fit.

Explore Flex 
<Grid columns="1" columnsMd="minmax(0, 1fr) auto" alignItems="center">
  <div>
    <h3 class="m-0">Ready to compose?</h3>
    <p class="mb-0">Use explicit tracks when equal widths are not the right fit.</p>
  </div>
  <BtnLink href="/components/layout/flex/" tone="accent">Explore Flex</BtnLink>
</Grid>

Item alignment

Alignment controls how children sit inside their cells. It does not change the number of tracks.

Compact item
A taller item establishes the row height. 
<Grid columns="2" alignItems="center" justifyItems="start">
  <Badge tone="accent">Compact item</Badge>
  <Panel bodyClass="p-4">A taller item establishes the row height.</Panel>
</Grid>

Behavior and accessibility

Keep DOM order meaningful. Dense placement can fill earlier gaps but may make visual order differ from keyboard and reading order. Use minmax(0, 1fr) for shrinkable content tracks. Breakpoints use the active theme.

API reference

Grid contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

container

RefOrValue<string>
Default
div

HTML element used as the layout root. Choose a semantic element such as section, nav or ul when its children fit that structure.

columns

RefOrValue<number | string>
Default
1

Column count from 1 to 12, or a CSS track list such as minmax(0, 1fr) auto. Numeric counts are clamped.

columnsSm

RefOrValue<number | string>
Default
inherits columns

Column count or CSS track list at the theme’s sm breakpoint and above.

columnsMd

RefOrValue<number | string>
Default
inherits smaller breakpoint

Column count or CSS track list at the theme’s md breakpoint and above.

columnsLg

RefOrValue<number | string>
Default
inherits smaller breakpoint

Column count or CSS track list at the theme’s lg breakpoint and above.

columnsXl

RefOrValue<number | string>
Default
inherits smaller breakpoint

Column count or CSS track list at the theme’s xl breakpoint and above.

alignItems

RefOrValue<GridAlignItems>
Default
stretch

Alignment inside each grid area: stretch, start, center or end.

justifyItems

RefOrValue<GridJustifyItems>
Default
stretch

Inline alignment inside each grid area: stretch, start, center or end.

dense

RefOrValue<boolean | string>
Default
false

Enables CSS grid-auto-flow: row dense. Accepts true or the string true; use a boolean binding for clarity.

Composition

Default slot: grid items. Native attributes are inherited by the chosen container. Register defineGridComponents.