Layout

Grid

Responsive equal-width column grid that collapses to a single stacked column on small screens.

Install

npx shadcn@latest add @alix/grid

Preview

1
2
3

Usage

<Grid columns={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Grid>

Examples

01

Column counts

The count is a desktop target — every grid starts as one column on mobile and steps up by breakpoint, so cells never get too narrow.

columns={2}
1
2
columns={4}
1
2
3
4
<Grid columns={2} gap="sm">
  <div>1</div>
  <div>2</div>
</Grid>

<Grid columns={4} gap="sm">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</Grid>
02

The reversed two-column pair

reverse flips the columns on desktop only — media leads on wide screens while mobile keeps the text-first reading order.

Text (first in source)
Media (shown first on desktop)
<Grid columns={2} reverse>
  <div>Text (first in source)</div>
  <div>Media (shown first on desktop)</div>
</Grid>
03

A card grid

The reuse the primitive exists for — an equal-width row of teasers that collapses cleanly on small screens.

Insight

Reading a cash crisis

Liquidity tells you where you are; the operating model tells you how you got there.

Insight

The first hundred days

The decisions that stabilize a business are made in the first weeks, not the first quarter.

<Grid columns={3} gap="lg">
  <ContentCard variant="news" tagline="Insight" title="Reading a cash crisis" … />
  <ContentCard variant="news" tagline="Insight" title="The first hundred days" … />
  <ContentCard variant="news" tagline="Insight" title="When to reset the model" … />
</Grid>

When to use it

Use it for

  • Equal-width content rows — card grids, people tiles, capability lists — that must collapse to one column on mobile.
  • The two-column text-and-media pair, with reverse to alternate which side leads on desktop.
  • As the layout engine under a block; the block layer composes Grid directly rather than wrapping it.

Reach for something else

  • A single vertical run — use Stack.
  • A horizontal row whose items size to their content — use Inline.
  • Uneven or spanning column tracks — Grid is deliberately equal-width; drop to a raw CSS grid for asymmetric layouts.

Props

PropTypeDefaultDescription
columns1 | 2 | 3 | 42Column count. Steps up by breakpoint so content never gets too narrow: 2 is 1→2 cols, 3 and 4 go 1→2→N.
gap"none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl""xl"Spacing between cells, from the shared gap scale.
align"start" | "center" | "end" | "stretch""stretch"Cross-axis alignment of items within each row.
minHeight"none" | "md" | "lg" | "xl" | "2xl""none"Minimum height, keyed to the container scale; none opts out.
reversebooleanfalseFlips the first child to last on desktop while keeping source order on mobile. Intended for the columns={2} pair idiom.
renderReactNode—Render prop to swap the underlying element (e.g. a semantic tag) while keeping the grid styling.

See also

StackInlineContainer