Grid

The Grid component uses the CSS grid layout to create flexible grids. By default it creates a 12-column layout. Please note that for xs screens a 1-column-layout will be applied. You can adjust this behaviour by using the columns property.

Each child will automatically be placed inside the next column. Once all the 12 columns have been filled, the next item will be placed inside a new row but within the first column.

<Grid>
  <div>
    Column 1
  </div>
  <div>
    Column 2
  </div>
  <div>
    Column 3
  </div>
  <div>
    Column 4
  </div>
  <div>
    Column 5
  </div>
  <div>
    Column 6
  </div>
  <div>
    Column 7
  </div>
  <div>
    Column 8
  </div>
  <div>
    Column 9
  </div>
  <div>
    Column 10
  </div>
  <div>
    Column 11
  </div>
  <div>
    Column 12
  </div>
  <div>
    Column 1
  </div>
</Grid>
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Column 10
Column 11
Column 12
Column 1

Column count

If you want to adjust the number of columns, use the columns property.

<Grid
  columns="3"
>
  <div>
    Column 1
  </div>
  <div>
    Column 2
  </div>
  <div>
    Column 3
  </div>
  <div>
    Column 1
  </div>
</Grid>
Column 1
Column 2
Column 3
Column 1

Responsive column count

It is possible to provide multiple columns values depending on the size of the viewport:

<Grid
  columns={
    Object {
      "lg": 4,
      "md": 3,
      "sm": 2,
      "xs": 1,
    }
  }
>
  <GridItem>
    First Column
  </GridItem>
  <GridItem>
    Second Column
  </GridItem>
  <GridItem>
    Third Column
  </GridItem>
  <GridItem>
    Fourth Column
  </GridItem>
</Grid>
First Column
Second Column
Third Column
Fourth Column

Colum and row gap

The columnGap and the rowGap property can be used to control horizontal and vertical gaps between items of the grid:

<React.Fragment>
  <Grid
    columnGap="1"
    columns="3"
    rowGap="1"
  >
    <GridItem
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Small gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Small gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Small gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Small gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Small gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "gray",
        }
      }
    >
      Small gaps
    </GridItem>
  </Grid>
  <Grid
    columnGap="6"
    columns="3"
    rowGap="6"
  >
    <GridItem
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Bigger gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Bigger gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Bigger gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Bigger gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Bigger gaps
    </GridItem>
    <GridItem
      style={
        Object {
          "background": "deeppink",
        }
      }
    >
      Bigger gaps
    </GridItem>
  </Grid>
</React.Fragment>
Small gaps
Small gaps
Small gaps
Small gaps
Small gaps
Small gaps
Bigger gaps
Bigger gaps
Bigger gaps
Bigger gaps
Bigger gaps
Bigger gaps

GridItem

If you need more control when positioning elements inside a Grid use the GridItem component.

columnSpan

To span an element across multiple columns, set the columnSpan property:

<Grid>
  <GridItem
    columnSpan="6"
  >
    Column from gap 1-6
  </GridItem>
  <GridItem
    columnSpan="6"
  >
    Column from gap 7-12
  </GridItem>
  <GridItem
    columnSpan="12"
  >
    Column from gap 1-12
  </GridItem>
</Grid>
Column from gap 1-6
Column from gap 7-12
Column from gap 1-12

Responsive columnSpan

It is possible to provide multiple columSpan values depending on the size of the viewport:

<Grid>
  <GridItem
    columnSpan={
      Object {
        "lg": 4,
        "md": 6,
        "sm": 12,
      }
    }
  >
    Spans 12 columns on small, 6 on a medium and 4 columns on large devices…
  </GridItem>
  <GridItem
    columnSpan={
      Object {
        "lg": 4,
        "md": 6,
        "sm": 12,
      }
    }
  >
    Spans 12 columns on small, 6 on a medium and 4 columns on large devices…
  </GridItem>
  <GridItem
    columnSpan={
      Object {
        "lg": 4,
        "md": 6,
        "sm": 12,
      }
    }
  >
    Spans 12 columns on small, 6 on a medium and 4 columns on large devices…
  </GridItem>
</Grid>
Spans 12 columns on small, 6 on a medium and 4 columns on large devices…
Spans 12 columns on small, 6 on a medium and 4 columns on large devices…
Spans 12 columns on small, 6 on a medium and 4 columns on large devices…

columnStart and columnEnd

Instead of using columnSpan you can set the columnStart property to specifiy in which column an element should be start in. Use the `columnEnd` property to set a specific column to end with.

<Grid>
  <GridItem
    columnEnd="6"
    columnStart="1"
  >
    Column from gap 1-6
  </GridItem>
  <GridItem
    columnEnd="12"
    columnStart="7"
  >
    Column from gap 7-12
  </GridItem>
  <GridItem
    columnEnd="12"
    columnStart="1"
  >
    Column from gap 1-12
  </GridItem>
  <GridItem
    columnEnd="12"
    columnStart="10"
  >
    Fills only the last three columns
  </GridItem>
</Grid>
Column from gap 1-6
Column from gap 7-12
Column from gap 1-12
Fills only the last three columns

Again, it is possible to provide multiple columnStart and columnEnd values depending on the size of the viewport:

<Grid>
  <GridItem
    columnEnd={
      Object {
        "lg": 10,
        "sm": 12,
      }
    }
    columnStart={
      Object {
        "lg": 4,
        "sm": 1,
      }
    }
  >
    Spans across all 12 columns on small devices and from colum 4-10 on large devices.
  </GridItem>
</Grid>
Spans across all 12 columns on small devices and from colum 4-10 on large devices.