Grid

Importing

import { Grid } from '@customerio/pluma-components/react';

Columns

The columns prop accepts a number, string, or array of strings.

If the value is a number, the grid will have that many equal columns. If the value is a string, it will be set as the CSS grid-template-columns property, which defines the number and sizes of columns. If a string array is provided, it will also be used for grid-template-columns, with the values joined by a space (e.g. ['1fr', 'auto'] becomes 1fr auto).

Per breakpoint

columns, rows, areas and autoFlow also take an object keyed by breakpoint. Each key applies from that width up, and base applies below sm. Without base, Grid's own value applies below the first breakpoint you set. See Responsive layout.

<Grid columns={{ base: 1, md: 2, lg: ['240px', '1fr'] }} gap="200">
  …
</Grid>

Gap

The gap between items can be controlled with the gap prop, which accepts space token values. rowGap and columnGap are also available for more fine-grained control of the gaps.

Areas

grid-template-areas can be set via the areas prop. It accepts a string, or an array of strings, which will be mapped into one string (e.g. ["header header", "nav main", "footer footer"] turns into "header header" "nav main" "footer footer").