Grid

CSS grid layout component to arrange direct child elements in a tiled grid layout.

Columns

Box

browse

docs

issues

({
  gap,
  col1,
  col3,
}) => (
  <Grid gap={gap} columns={[col1, null, col3]}>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
    <Box sx={{ bg: 'primary', color: 'white' }}>Box</Box>
    <Box sx={{ bg: 'muted' }}>Box</Box>
  </Grid>
)

Controls

	Name	Description	Default
- (2 properties)

	col1	number of (equally-sized) columns in first position number	2
	col3	number of (equally-sized) columns in third position number	4
GridProps (1 properties)

Box

passed (1)
dashboard

color

Viewport

Box

320px

Box

375px

Box

768px

Box

1024px

theme-ui/Form

theme-ui/Heading

Docs

Grid

Columns

Controls

A11y tests

color

Viewport