Grid

The <Grid>, <Row> and <Column> components are used to arrange content and components on the grid within a page.

The math for the website is calculated using a 12 column grid at the large breakpoint, 8 column at medium (tablet) breakpoint and 4 column at the small (mobile) breakpoint. The design is based on a 16 column grid, however the math is calcualted with 12 to prevent having to add a offset class to each row.

To learn more about the grid is built, you can read the docs in the Carbon repo.

Grid

The <Grid> component is a wrapper that adds the bx--grid class to a wrapper div. You won’t need this when adding components to .mdx pages as this is already built into the template.

Code

<Grid></Grid>

Props

propertypropTyperequireddefaultdescription
childrennode
classNamestringAdd custom class name

Row

The <Row> component is a wrapper that adds the bx--row class to a wrapper div. You will want to use this to define rows that you will place <Column> components inside of.

Code

<Row> <Column> Content or additional <Components /> </Column> </Row>

Props

propertypropTyperequireddefaultdescription
childrennode
classNamestringAdd custom class name

Column

The <Column> component is used to define column widths for your content, you can set the rules at different breakpoints with the props.

Example

Grid Example
Grid Example
Grid Example

No gutter left

Grid Example
Grid Example
Grid Example

No gutter

Grid Example
Grid Example
Grid Example

Offset

Grid Example
Grid Example

Code

<Row> <Column colMd={4} colLg={4}> ![Grid Example](images/Article_05.png) </Column> <Column colMd={4} colLg={4}> ![Grid Example](images/Article_05.png) </Column> <Column colMd={4} colLg={4}> ![Grid Example](images/Article_05.png) </Column> </Row>

No gutter left

<Row> <Column colMd={4} colLg={4} noGutterMdLeft> ![Grid Example](images/Article_05.png) </Column> <Column colMd={4} colLg={4} noGutterMdLeft> ![Grid Example](images/Article_05.png) </Column> <Column colMd={4} colLg={4} noGutterMdLeft> ![Grid Example](images/Article_05.png) </Column> </Row>

No gutter

<Row> <Column colMd={4} colLg={4} noGutterSm> ![Grid Example](images/Article_05.png) </Column> <Column colMd={4} colLg={4} noGutterSm> ![Grid Example](images/Article_05.png) </Column> <Column colMd={4} colLg={4} noGutterSm> ![Grid Example](images/Article_05.png) </Column> </Row>

Offset

<Row> <Column colMd={4} colLg={4} offsetLg={4}> ![Grid Example](images/Article_05.png) </Column> <Column colMd={4} colLg={4}> ![Grid Example](images/Article_05.png) </Column> </Row>

Props

propertypropTyperequireddefaultdescription
childrennode
classNamestringAdd custom class name
colSmnumberSpecify the col width at small breakpoint
colMdnumberSpecify the col width at medium breakpoint
colLgnumber12Specify the col width at large breakpoint
offsetLgnumberSpecify the col offset at large breakpoint
offsetMdnumberSpecify the col offset at medium breakpoint
offsetSmnumberSpecify the col offset at small breakpoint
noGutterSmboolSpecify no-gutter at small breakpoint
noGutterMdboolSpecify no-gutter at medium breakpoint
noGutterLgboolSpecify no-gutter at large breakpoint
noGutterSmLeftboolSpecify no-gutter left at small breakpoint
noGutterMdLeftboolSpecify no-gutter left at medium breakpoint
noGutterLgLeftboolSpecify no-gutter left at large breakpoint