Grid

Provides utilities for basic layout. A grid consists of multiple columns which each define how many columns they span. Grids are collapsed on the mobile breakpoint by default but this can be modified using the collapseBelow prop.

Examples

Basic Grid

View standalone

Column 1

Column 2

Column 3

Column 4

Code

<Grid>
  <Column span={4}>
    <Placeholder>
      Column 1
    </Placeholder>
  </Column>
  <Column span={4}>
    <Placeholder>
      Column 2
    </Placeholder>
  </Column>
  <Column span={4}>
    <Placeholder>
      Column 3
    </Placeholder>
  </Column>
  <Column span={4}>
    <Placeholder>
      Column 4
    </Placeholder>
  </Column>
</Grid>

Responsive Gap

View standalone

The gap can be provided as either a string or a responsive value.

Column 1

Column 2

Column 3

Code

<Grid gap="16px">
  <Column span={4}>
    <Placeholder>
      Column 1
    </Placeholder>
  </Column>
  <Column span={4}>
    <Placeholder>
      Column 2
    </Placeholder>
  </Column>
  <Column span={4}>
    <Placeholder>
      Column 3
    </Placeholder>
  </Column>
</Grid>

Responsive Column Span

View standalone

The span can be provided as either a string or a responsive value. Note that a responsive span prop will superseed the collapseBelow prop on the parent Grid.

Column 1

Column 2

Column 3

Column 4

Code

<Grid>
  <Column
    span={{
      desktop: 4,
      mobile: 6
    }}
  >
    <Placeholder>
      Column 1
    </Placeholder>
  </Column>
  <Column
    span={{
      desktop: 4,
      mobile: 6
    }}
  >
    <Placeholder>
      Column 2
    </Placeholder>
  </Column>
  <Column
    span={{
      desktop: 4,
      mobile: 6
    }}
  >
    <Placeholder>
      Column 3
    </Placeholder>
  </Column>
  <Column
    span={{
      desktop: 4,
      mobile: 6
    }}
  >
    <Placeholder>
      Column 4
    </Placeholder>
  </Column>
</Grid>

Collapsing Grid

View standalone

Grids can be specified to collapse below certain breakpoints.

Column 1

Column 2

Column 3

Code

<Grid collapseBelow="desktop">
  <Column span={4}>
    <Placeholder>
      Column 1
    </Placeholder>
  </Column>
  <Column span={4}>
    <Placeholder>
      Column 2
    </Placeholder>
  </Column>
  <Column span={4}>
    <Placeholder>
      Column 3
    </Placeholder>
  </Column>
</Grid>

Custom Order

View standalone

Columns can be rearranged by passing a custom order.

Column 1

Column 2

Code

<Grid collapseBelow="desktop">
  <Column
    order={2}
    span={4}
  >
    <Placeholder>
      Column 1
    </Placeholder>
  </Column>
  <Column
    order={1}
    span={4}
  >
    <Placeholder>
      Column 2
    </Placeholder>
  </Column>
</Grid>

Basic Grid With Start & End Columns

View standalone

Column can be specified with column start and end locations.

Column 1

Column 2

Code

<Grid>
  <Column
    end={6}
    start={1}
  >
    <Placeholder>
      Column 1
    </Placeholder>
  </Column>
  <Column
    end={7}
    start={13}
  >
    <Placeholder>
      Column 2
    </Placeholder>
  </Column>
</Grid>

Basic Grid With Overriden Grid Template Columns

View standalone

Column 1

Column 2

Code

<Grid gridTemplateColumns="max-content 1fr">
  <Column
    end={6}
    start={1}
  >
    <Placeholder>
      Column 1
    </Placeholder>
  </Column>
  <Column
    end={7}
    start={13}
  >
    <Placeholder>
      Column 2
    </Placeholder>
  </Column>
</Grid>

Props

Grid

`rowGap`

ConditionalStyleWithResponsiveArray<Values<{ none: number; "4px": CSSVarFunction; "8px": CSSVarFunction; "12px": CSSVarFunction; "16px": CSSVarFunction; "20px": CSSVarFunction; ... 10 more ...; "160px": CSSVarFunction; }, { ...; }>, string[] & { ...; }>

Content renders with specified gap between rows.

`columnGap`

Content renders with specified gap between columns.

`gap`

Shorthand for setting both rowGap and columnGap at the same time.

`alignItems`

ConditionalStyleWithResponsiveArray<Values<("stretch" | "center" | "flex-end" | "flex-start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Specifies how items are laid out along the cross axis.

`justifyContent`

ConditionalStyleWithResponsiveArray<Values<("space-between" | "stretch" | "center" | "flex-end" | "flex-start")[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Specifies how the space between and around the items is rendered.

`as`

"div" | "ol" | "ul"

Content renders by default as a `div` unless `ol` or `ul` are passed.

`gridTemplateColumns`

string

Overrides the default gridTemplateColumns

`collapseBelow`

"tablet" | "desktop" | "wide"

Grids collapse on specified breakpunt, default is below 'tablet'. Will be superseeded by `span` when `span` uses responsive notation

Default: "tablet"

`className`

string

The className property sets the value of the class attribute of the element.

`atoms`

Applies permitted design system styles. See styling documentation for more.

Column

`as`

"div" | "li"

Content renders by default as a `div` unless `li` is passed.

`className`

string

The className property sets the value of the class attribute of the element.

`order`

ConditionalStyleWithResponsiveArray<Values<Record<2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | "none" | "first" | "last" | 9 | 10 | 11 | 12, number>, { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { ...; }>

sets the order to lay out column in container container.

`end`

ConditionalStyleWithResponsiveArray<Values<number[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Indicates what gridColumn it should end at.

`start`

ConditionalStyleWithResponsiveArray<Values<number[], { defaultClass: string; conditions: { [x: string]: string; }; }>, string[] & { length: 4; }>

Indicates what gridColumn it should start at.

`span`

ConditionalStyleWithResponsiveArray<Values<{ [k: string]: "span 2" | "span 1" | "span 3" | "span 4" | "span 5" | "span 6" | "span 7" | "span 8" | "span 9" | "span 10" | "span 11" | "span 12"; }, { defaultClass: string; conditions: { ...; }; }>, string[] & { ...; }>

Indicates on how many grid columns it should span. If using responsive notation, it will superseed the `collapseBelow` prop on the parent `Grid`.

`atoms`

Applies permitted design system styles. See styling documentation for more.