Grid

A responsive column grid system for page layouts. Based on a 12-column grid that collapses at breakpoints.

Preview

12 columns

1

2

3

4

5

6

7

8

9

10

11

12

Common layouts

3-column (4+4+4)

col 1

col 2

col 3

2-column (6+6)

col 1

col 2

Sidebar + content (3+9)

sidebar

main content

Breakpoints

Breakpoint	Name	Columns	Gutter
≥ 1280px	xl	12	24 px
≥ 1024px	lg	12	24 px
≥ 768px	md	8	16 px
≥ 480px	sm	4	16 px
< 480px	xs	4	12 px

Props

Prop	Type	Default	Description
columns	number	12	Number of columns
gap	string	--space-6	Gutter spacing
children	React.ReactNode	--	Grid items

Grid.Col

Prop	Type	Default	Description
span	number	1	Columns to span
sm	number	--	Span at sm breakpoint
md	number	--	Span at md breakpoint
lg	number	--	Span at lg breakpoint

Code example

React

import { Grid } from '@thepace/lexicon/components';

<Grid columns={12} gap="var(--space-6)">
  <Grid.Col span={3}>Sidebar</Grid.Col>
  <Grid.Col span={9}>Main content</Grid.Col>
</Grid>

CSS utility

.my-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

CSS class reference

Class	Purpose
.lex-grid	Grid container
.lex-grid--12	12-column grid
.lex-grid--8	8-column grid
.lex-grid--4	4-column grid
.lex-grid__col	Grid column item

Guidelines

Do

• Use the 12-column grid for complex dashboard layouts.
• Collapse to fewer columns at smaller breakpoints.
• Use consistent gutter spacing from the spacing scale.

Don't

• Don't nest grids more than 2 levels deep.
• Don't mix grid and flex layout within the same container.