Grid

Overview

The grid component is a layout component that allows you to create a grid layout with 12 columns. It is based on the CSS Grid Layout Module.

When to use

t.b.d.

When to consider an alternative

t.b.d.

Component

Default

The default grid has colGap gap of Grid.Spacer.spaceXs (8px) and margin left/right of Grid.Spacer.spaceXs (8px) . The column width for children is set to 1fr.

Spacing

Use one of the spacing tokens (Grid.Spacer.spaceS) to set the colGap (column gap) and rowGap (row gap) of the grid.

• Grid.Spacer.nospace,
• Grid.Spacer.spaceXs,
• Grid.Spacer.spaceS,
• Grid.Spacer.spaceM,
• Grid.Spacer.spaceL,
• Grid.Spacer.spaceXl,
• Grid.Spacer.space2xl,
• Grid.Spacer.space3xl

Grid Margin

Use one of the spacing tokens (Grid.Spacer.spaceXs) to set equal left/right margin of the grid.

• Grid.Spacer.nospace,
• Grid.Spacer.spaceXs,
• Grid.Spacer.spaceS,
• Grid.Spacer.spaceM,
• Grid.Spacer.spaceL,
• Grid.Spacer.spaceXl,
• Grid.Spacer.space2xl,
• Grid.Spacer.space3xl

Grid Item Breakpoints

Use the brp1, brp2, brp3 props to set the column span for each breakpoint.

Grid Alignment

Use the alignContent, alignItems, justifyItems and justifyContent props to set the alignment of the grid items within their grid cell.

Grid Item column/row start and end

Use colStart, colEnd, rowStart and rowEnd to set the column start and end for each grid item to create more complex layouts.

Properties

Default

Grid.Item