Grid

Responsive layouts, automatically aligned

Examples

Basic grid

<Grid>
  <GridColumn
    aboveSmall={4}
    base={12}
  >
    <div className="ba b-green h3" />
  </GridColumn>
  <GridColumn
    aboveSmall={4}
    base={12}
  >
    <div className="ba b-green h3" />
  </GridColumn>
  <GridColumn
    aboveSmall={4}
    base={12}
  >
    <div className="ba b-green h3" />
  </GridColumn>
</Grid>

Wide gutters

<Grid gutter="wide">
  <GridColumn base={4}>
    <div className="ba b-green h3" />
  </GridColumn>
  <GridColumn base={4}>
    <div className="ba b-green h3" />
  </GridColumn>
  <GridColumn base={4}>
    <div className="ba b-green h3" />
  </GridColumn>
</Grid>

No gutters

<Grid gutter="flush">
  <GridColumn base={4}>
    <div className="ba b-green h3" />
  </GridColumn>
  <GridColumn base={4}>
    <div className="ba b-green h3" />
  </GridColumn>
  <GridColumn base={4}>
    <div className="ba b-green h3" />
  </GridColumn>
</Grid>

Multi-row

Using multiple columns with a combined width that exceeds 12 will automatically wrap into new rows. In this example the columns are stacked by default, two per row above the small breakpoint, and three per row above the medium breakpoint.

<Grid>
  <GridColumn
    aboveMedium={4}
    aboveSmall={6}
  >
    <div className="ba b-green h3 mb3" />
  </GridColumn>
  <GridColumn
    aboveMedium={4}
    aboveSmall={6}
  >
    <div className="ba b-green h3 mb3" />
  </GridColumn>
  <GridColumn
    aboveMedium={4}
    aboveSmall={6}
  >
    <div className="ba b-green h3 mb3" />
  </GridColumn>
  <GridColumn
    aboveMedium={4}
    aboveSmall={6}
  >
    <div className="ba b-green h3 mb3 m_mb0" />
  </GridColumn>
  <GridColumn
    aboveMedium={4}
    aboveSmall={6}
  >
    <div className="ba b-green h3 mb3 s_mb0" />
  </GridColumn>
  <GridColumn
    aboveMedium={4}
    aboveSmall={6}
  >
    <div className="ba b-green h3" />
  </GridColumn>
</Grid>

Responsive at all breakpoints

<Grid>
  <GridColumn
    aboveLarge={4}
    aboveMedium={6}
    aboveSmall={8}
    base={12}
  >
    <div className="ba b-green h3" />
  </GridColumn>
</Grid>

Hidden at some breakpoints

You can set a column width to 0 to hide it entirely at certain breakpoints

<Grid>
  <GridColumn
    aboveMedium={3}
    base={0}
  >
    <div className="bg-red h4 mb3 tc">
      Item A
    </div>
  </GridColumn>
  <GridColumn
    aboveMedium={3}
    base={12}
  >
    <div className="bg-blue h4 mb3 tc">
      Item B
    </div>
  </GridColumn>
  <GridColumn
    aboveMedium={3}
    base={12}
  >
    <div className="bg-green h4 mb3 tc">
      Item C
    </div>
  </GridColumn>
  <GridColumn
    aboveMedium={3}
    base={12}
  >
    <div className="bg-yellow h4 mb3 tc">
      Item D
    </div>
  </GridColumn>
</Grid>

Centered grid

The Grid component should not be used for centered single-column grids. This can be built with Atomic classes: mw7 center tc.

“In our industry, you hear a lot of talk about the future of work. What I’ve come to believe — because I see it every day — is that the entrepreneurial spirit of independent professionals is the most precious resource we have as a society.”

<div class="mw7 center tc">
    <div class="ba b-green">
        “In our industry, you hear a lot of talk about the future of work. What I’ve
        come to believe — because I see it every day — is that the entrepreneurial
        spirit of independent professionals is the most precious resource we have as
        a society.”
    </div>
</div>

Props

GridColumn

children
Column contents.

Type
React.ReactNode
base
Default width of the column as a fraction of the grid out of 12, to be shown at all breakpoints except those covered by the three optional props below.

Type
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Default
12
aboveSmall
Width of the column as a fraction of the grid out of 12, to be shown in viewports wider than small.

Type
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
aboveMedium
Width of the column as a fraction of the grid out of 12, to be shown in viewports wider than medium.

Type
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
aboveLarge
Width of the column as a fraction of the grid out of 12, to be shown in viewports wider than large.

Type
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string
dataTest
deprecated
A selector hook into the React component for use in automated testing environments.

Note:
Deprecated in favor of the dataTestId prop

Type
string

Grid

children
Grid contents.

Type
React.ReactNode
gutter
Controls the amount of space between columns in the grid.

Type
'normal' | 'wide' | 'flush'
Default
'normal'
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string
dataTest
deprecated
A selector hook into the React component for use in automated testing environments.

Note:
Deprecated in favor of the dataTestId prop

Type
string