Skip to content
Gusto’s condensed “G” logoWorkbench

Layout grid

The Layout grid is implemented using <Layout /> and offers comprehensive guidance for defining padding, columns, and gutters across all responsive breakpoints when constructing layouts using CSS Grid.

A pointing to a section that defines the grid; B pointing to a section that defines padding around the grid; C pointing to a section that is one of the repeating vertical components of the grid; D pointing to the gutter, the space between columns in the grid; E pointing to a section placed within the grid
Layout grid
Anatomy of the Layout
ItemNameDescription
A<Layout />The <Layout /> defines and manages the Layout grid. Additionally, it sets the margins on either side of the <Layout /> and controls the gutters, which determine the spacing between each column within the <Layout />.
BPaddingThe padding determines the spacing on all sides of the <Layout />. Padding value varies across breakpoints.
CColumnThe column runs vertically within the grid and is used to create distinct sections for content. Columns numbers vary across breakpoints.
DGutterThe gutter is the space between rows and columns within the grid. Gutter value varies across breakpoints.
E<LayoutSection />The <LayoutSection /> component sets how many columns an element should span within the Layout grid.

This example defines a <Layout /> containing several <LayoutSection /> components. Each <LayoutSection /> spans one column, and in this example contains a <Box />. Any component may be placed in a <LayoutSection />.

1
2
3
4
5
6
7
8
9
10
11
12

import React from 'react'


import { Box, Layout, LayoutSection } from '@gusto/workbench'


export const Basic = () => {
  return (
    <Layout>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          1
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          2
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          3
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          4
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          5
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          6
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          7
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          8
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          9
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          10
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          11
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/6" columnsLg="1/12">
        <Box
          border="1px solid salt.1000"
          paddingVertical={4}
          paddingHorizontal={2}
          textAlign="center"
        >
          12
        </Box>
      </LayoutSection>
    </Layout>
  )
}

This example shows <LayoutSection /> components that span half the <Layout />.

1
2
3
4
5
6
7
8
9
10
11
12

import React from 'react'


import { Box, Layout, LayoutSection } from '@gusto/workbench'


export const Halves = () => {
  return (
    <Layout>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          1
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          2
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          3
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          4
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          5
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          6
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          7
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          8
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          9
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          10
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          11
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          12
        </Box>
      </LayoutSection>
    </Layout>
  )
}

This example shows <LayoutSection /> components that span a third of the <Layout />. Note that at xs viewports, there are only two columns in the <Layout /> so we cannot divide it into thirds.

1
2
3
4
5
6
7
8
9
10
11
12

import React from 'react'


import { Box, Layout, LayoutSection } from '@gusto/workbench'


export const Thirds = () => {
  return (
    <Layout>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          1
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          2
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          3
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          4
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          5
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          6
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          7
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          8
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          9
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          10
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          11
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="full" columnsSm="1/3">
        <Box border="1px solid salt.1000" padding={4}>
          12
        </Box>
      </LayoutSection>
    </Layout>
  )
}

This example shows <LayoutSection /> components that span one quarter and three quarters of the <Layout />. Note that at xs viewports, there are only two columns in the <Layout /> so we cannot divide it into quarters. Additionally, for sm and md viewports, we have six columns in the <Layout />, and cannot divide this into quarters either.

1
2
3
4
5
6
7
8
9
10
11
12

import React from 'react'


import { Box, Layout, LayoutSection } from '@gusto/workbench'


export const ThreeQuarters = () => {
  return (
    <Layout>
      <LayoutSection columnsXs="1/2" columnsSm="1/3" columnsLg="1/4">
        <Box border="1px solid salt.1000" padding={4}>
          1
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="2/3" columnsLg="3/4">
        <Box border="1px solid salt.1000" padding={4}>
          2
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/3" columnsLg="1/4">
        <Box border="1px solid salt.1000" padding={4}>
          3
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="2/3" columnsLg="3/4">
        <Box border="1px solid salt.1000" padding={4}>
          4
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/3" columnsLg="1/4">
        <Box border="1px solid salt.1000" padding={4}>
          5
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="2/3" columnsLg="3/4">
        <Box border="1px solid salt.1000" padding={4}>
          6
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/3" columnsLg="1/4">
        <Box border="1px solid salt.1000" padding={4}>
          7
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="2/3" columnsLg="3/4">
        <Box border="1px solid salt.1000" padding={4}>
          8
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/3" columnsLg="1/4">
        <Box border="1px solid salt.1000" padding={4}>
          9
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="2/3" columnsLg="3/4">
        <Box border="1px solid salt.1000" padding={4}>
          10
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="1/3" columnsLg="1/4">
        <Box border="1px solid salt.1000" padding={4}>
          11
        </Box>
      </LayoutSection>
      <LayoutSection columnsXs="1/2" columnsSm="2/3" columnsLg="3/4">
        <Box border="1px solid salt.1000" padding={4}>
          12
        </Box>
      </LayoutSection>
    </Layout>
  )
}

<LayoutSection /> components will inherit the column span from the values set for smaller breakpoint sizes. At each successive breakpoint size, the <LayoutSection /> will take up the same span unless explicitly set to a different span.

xs: full (2/2)
xs: full (2/2)
sm: 1/2 (3/6)
xs: full (2/2)
sm: 1/2 (3/6)
md: 2/3 (4/6)
xs: full (2/2)
sm: 1/2 (3/6)
md: 2/3 (4/6)
lg: 5/12
xs: full (2/2)
sm: 1/2 (3/6)
md: 2/3 (4/6)
lg: 5/12
xl: 1/2 (6/12)

import React from 'react'


import { Box, Layout, LayoutSection } from '@gusto/workbench'


export const ColumnSpan = () => {
  return (
    <Layout>
      <LayoutSection>
        <Box border="1px solid salt.1000" padding={4}>
          xs: full (2/2)
        </Box>
      </LayoutSection>
      <LayoutSection columnsSm="1/2">
        <Box border="1px solid salt.1000" padding={4}>
          xs: full (2/2)
          <br />
          sm: 1/2 (3/6)
        </Box>
      </LayoutSection>
      <LayoutSection columnsSm="1/2" columnsMd="2/3">
        <Box border="1px solid salt.1000" padding={4}>
          xs: full (2/2)
          <br />
          sm: 1/2 (3/6)
          <br />
          md: 2/3 (4/6)
        </Box>
      </LayoutSection>
      <LayoutSection columnsSm="1/2" columnsMd="2/3" columnsLg="5/12">
        <Box border="1px solid salt.1000" padding={4}>
          xs: full (2/2)
          <br />
          sm: 1/2 (3/6)
          <br />
          md: 2/3 (4/6)
          <br />
          lg: 5/12
        </Box>
      </LayoutSection>
      <LayoutSection
        columnsXs="full"
        columnsSm="1/2"
        columnsMd="2/3"
        columnsLg="5/12"
        columnsXl="1/2"
      >
        <Box border="1px solid salt.1000" padding={4}>
          xs: full (2/2)
          <br />
          sm: 1/2 (3/6)
          <br />
          md: 2/3 (4/6)
          <br />
          lg: 5/12
          <br />
          xl: 1/2 (6/12)
        </Box>
      </LayoutSection>
    </Layout>
  )
}
React props
NameTypeDefaultDescription
children  
ReactNode
-The content of the component
React props
NameTypeDefaultDescription
children  
ReactNode
-The content of the component
columns  
12
1The number of columns the LayoutSection will span at base viewport sizes and up
columnsSm  
123456
-The number of columns the LayoutSection will span at `sm` viewport sizes and up
columnsMd  
123456
-The number of columns the LayoutSection will span at `md` viewport sizes and up
columnsLg  
123456789101112
-The number of columns the LayoutSection will span at `lg` viewport sizes and up
columnsXl  
123456789101112
-The number of columns the LayoutSection will span at `xl` viewport sizes and up