Grid🔗

The Grid components consists of 3 different components: <Grid>, <Row>, <Col>. By default, it has a max content width of 1320px and gutters of 24px.

Example🔗

Props - Grid🔗

Name
Description
Type
Default Value

Row🔗

Groups a number of columns and can align them.

A row groups a number of columns and can align them

Props - Row🔗

Name
Description
Type
Default Value
align"start" | "end" | "center" | undefinedstart

Col🔗

A col component has a size to define how many columns it spans over.

The size prop can be used in two different ways:

  • Passing a number will set the column size for the fromL breakpoint while it defaults to full width for smaller viewports.
  • Passing an object with sizes for the available breakpoints:
    • default: refers to viewports from 0 - 480px
    • theme.breakpoints.fromM: refers to viewports from 480 - 1024px
    • theme.breakpoints.fromL: refers to viewports over 1024px

Props - Col🔗

Name
Description
Type
Default Value
childrenA JSX nodenoden/a
sizeSize of columnunion(object,number){ default: 4, '@media (min-width: 1024px)': 12 }

DebugGrid🔗

We also provide a debugging component that displays a fixed grid overlay. You can use it by importing it in development:

Example🔗

Props - DebugGrid🔗

Name
Description
Type
Default Value
disabledboolean | undefinedfalse
storybookboolean | undefinedfalse
2022 © Volvo Car Corporation