Grid

A CSS-grid wrapper for arranging elements in equal, proportional, or auto-fitting columns.

For single-direction stacks (vertical or a flex row that wraps), use Container instead.

Examples

Equal columns

Pass a number for N equal-width columns.

Column 1

Column 2

Column 3

<Grid :cols="3" gap="medium">
  <Box variant="info">Column 1</Box>
  <Box variant="info">Column 2</Box>
  <Box variant="info">Column 3</Box>
</Grid>

Proportional widths

Pass an array of fr weights for asymmetric layouts.

2fr

3fr

1fr

<Grid :cols="[2, 3, 1]" gap="medium">
  <Box variant="info">2fr</Box>
  <Box variant="success">3fr</Box>
  <Box variant="warning">1fr</Box>
</Grid>

Mixed track sizes

Strings pass through unchanged, so you can combine fixed and flexible tracks.

Fixed 200px

Fills remaining space

<Grid :cols="['200px', '1fr']" gap="medium">
  <Box variant="info">Fixed 200px</Box>
  <Box variant="info">Fills remaining space</Box>
</Grid>

Small-width breakpoint

colsSmall overrides cols when the grid's own width is at or below breakpoint. The default breakpoint is 640px unless you specify it. The check is a CSS container query against the grid itself, so it triggers based on the grid's available width (e.g. when nested inside a sidebar), not the viewport.

Card 1

Card 2

Card 3

<Grid :cols="3" :cols-small="1" breakpoint="480px" gap="small">
  <Box variant="info">Card 1</Box>
  <Box variant="info">Card 2</Box>
  <Box variant="info">Card 3</Box>
</Grid>

Responsive auto-fit

minColWidth switches to repeat(auto-fit, minmax(...)) so items reflow to fit the viewport without media queries. Great for metric tiles and card grids.

Card 1

Card 2

Card 3

Card 4

Card 5

<Grid min-col-width="180px" gap="medium">
  <Box variant="info">Card 1</Box>
  <Box variant="info">Card 2</Box>
  <Box variant="info">Card 3</Box>
  <Box variant="info">Card 4</Box>
  <Box variant="info">Card 5</Box>
</Grid>

Nested grids

Left

a

b

c

d

<Grid :cols="2" gap="medium">
  <Box variant="info">Left</Box>
  <Grid :cols="2" gap="small">
    <Box variant="success">a</Box>
    <Box variant="success">b</Box>
    <Box variant="success">c</Box>
    <Box variant="success">d</Box>
  </Grid>
</Grid>

Props

Prop	Type	Required	Default
cols	GridCols	No	—
colsSmall	GridCols	No	—
breakpoint	string	No	—
gap	GridGap | string	No	—
minColWidth	string	No	—