Components

Grid(React)

Responsive layouts, automatically aligned.

Version:14.18.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { GridColumn, Grid } from '@thumbtack/thumbprint-react';

Examples

Basic grid

Wide gutters

No gutters

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.

Responsive at all breakpoints

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

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