ComponentsLumos 0.0.1Open component

Grid

A column grid for repeated things, with a count you set, or as many columns as will fit.

Use Grid for a list of similar items: cards, logos, team members, posts. Set the number of columns per breakpoint, or let the grid decide from a minimum column width.

astro

<Grid xsmall={2} medium={4}>
  <div>1</div>
  <div>2</div>
</Grid>

<Grid xsmall={2} medium={4}>
  <div>1</div>
  <div>2</div>
</Grid>

Two columns below 48rem, four from 48rem up.

Props

Every variant

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`variant`	`"columns" \| "autofit" \| "autofill"`	`"columns"`	How the columns are decided: a count you set, or as many as fit.

variant="columns"

Prop	Type	Default	What it does
`xsmall`	`number (1–12)`	`1`	Columns below 30rem. The base every larger size falls back to.
`small`	`number (1–12)`	None	Columns from 30rem up. Inherits `xsmall` when unset.
`medium`	`number (1–12)`	None	Columns from 48rem up. Inherits `small` when unset.
`large`	`number (1–12)`	None	Columns from 64rem up. Inherits `medium` when unset.

variant="autofit" and "autofill"

Prop	Type	Default	What it does
`minColumnWidth`	`number (rem)`	`12`	The smallest a column may get before the count drops.
`maxColumnCount`	`number (1–12)`	`12`	Never exceed this many columns, however wide the grid gets.

Counts inherit upwards

You only declare the sizes where the design actually changes. Set xsmall={1} and medium={3} and the 30rem size stays at one column while 64rem and up stays at three.

astro

<Grid xsmall={1} medium={3}>

<Grid xsmall={1} medium={3}>

The four breakpoints are 30rem, 48rem and 64rem, plus everything below 30rem. They are the only fixed breakpoints in the framework: everything else is fluid.

autofit or autofill

Both fit as many columns as the width allows, from minColumnWidth. The difference shows when there are not enough items to fill a row: autofit stretches the ones you have to fill the width, autofill leaves the empty columns as space.

astro

<Grid variant="autofit" minColumnWidth={16} maxColumnCount={4}>
  <Card heading="Grows to fill the row" />
</Grid>

<Grid variant="autofit" minColumnWidth={16} maxColumnCount={4}>
  <Card heading="Grows to fill the row" />
</Grid>

Spacing

The gap is the site gutter, so every grid on the site lines up with every other. Override it on a single grid with a gap-* utility.

astro

<Grid xsmall={2} class="gap-2">

<Grid xsmall={2} class="gap-2">