Components

Grid(React)

Responsive layouts, automatically aligned.

Version:	`14.16.0` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { GridColumn, Grid } from '@thumbtack/thumbprint-react';`

Examples

Basic grid

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

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

<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>

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

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

Responsive at all breakpoints

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

<Grid>
    <GridColumn base={12} aboveSmall={8} aboveMedium={6} aboveLarge={4}>
        <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

Item A

Item B

Item C

Item D

<Grid>
    <GridColumn base={0} aboveMedium={3}>
        <div className="bg-red h4 mb3 tc">Item A</div>
    </GridColumn>

    <GridColumn base={12} aboveMedium={3}>
        <div className="bg-blue h4 mb3 tc">Item B</div>
    </GridColumn>

    <GridColumn base={12} aboveMedium={3}>
        <div className="bg-green h4 mb3 tc">Item C</div>
    </GridColumn>

    <GridColumn base={12} aboveMedium={3}>
        <div className="bg-yellow h4 mb3 tc">Item D</div>
    </GridColumn>
</Grid>

<Grid>
    <GridColumn base={0} aboveMedium={3}>
        <div className="bg-red h4 mb3 tc">Item A</div>
    </GridColumn>
    <GridColumn base={12} aboveMedium={3}>
        <div className="bg-blue h4 mb3 tc">Item B</div>
    </GridColumn>
    <GridColumn base={12} aboveMedium={3}>
        <div className="bg-green h4 mb3 tc">Item C</div>
    </GridColumn>
    <GridColumn base={12} aboveMedium={3}>
        <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
This prop can be one of the following 13 types:
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
This prop can be one of the following 13 types:
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
This prop can be one of the following 13 types:
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
This prop can be one of the following 13 types:
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
This prop can be one of the following 3 types:
'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