Grid

Proportional columns

Use fr units for proportional sizing. 2fr takes twice the space of 1fr.

2fr — Main content

1fr — Sidebar

import { Grid } from '@eekodigital/raster';

<Grid gap="4">
  <Grid.Col width="2fr">Main content</Grid.Col>
  <Grid.Col width="1fr">Sidebar</Grid.Col>
</Grid>

Equal columns

Give every column 1fr for equal widths.

1fr

1fr

1fr

<Grid gap="4">
  <Grid.Col width="1fr">Card</Grid.Col>
  <Grid.Col width="1fr">Card</Grid.Col>
  <Grid.Col width="1fr">Card</Grid.Col>
</Grid>

Fixed + flexible

Mix fixed pixel widths with auto to fill remaining space.

200px fixed

auto — fills remaining

<Grid gap="4">
  <Grid.Col width="200px">Fixed sidebar</Grid.Col>
  <Grid.Col width="auto">Fills remaining</Grid.Col>
</Grid>

Responsive

Column widths accept responsive objects with named breakpoints or custom pixel values.

Main — full on mobile, 2fr on md+

Sidebar — full on mobile, 1fr on md+

<Grid gap="4">
  <Grid.Col width={{ base: 'full', md: '2fr' }}>Main</Grid.Col>
  <Grid.Col width={{ base: 'full', md: '1fr' }}>Sidebar</Grid.Col>
</Grid>

Props

Grid

Prop	Type	Default	Description
gap	”1”–“24"	"4”	Gap between columns and rows (spacing token).
align	”start” | “center” | “end” | “stretch"	"stretch”	Vertical alignment of items within rows.
as	ElementType	”div”	Rendered HTML element.
className	string	—

Grid.Col

Prop	Type	Default	Description
width	string	”1fr”	Column width: fr values, px/rem lengths, auto, or full. Accepts responsive values.
as	ElementType	”div”	Rendered HTML element.
className	string	—