Skip to main contentGatsby theme Carbon

Grid

<Row> and <Column> components are used to arrange content and components on the grid within a page. To learn more about the grid is built, you can read the docs in the Carbon repo.

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

components/Grid.js
<Row>
<Column>
Content or additional <Components />
</Column>
</Row>
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

components/Grid.js
<Row>
<Column colMd={4} colLg={4}>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4}>
![Grid Example](images/Article_05.jpg)
No gutter left
components/Grid.js
<Row>
<Column colMd={4} colLg={4} noGutterMdLeft>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
![Grid Example](images/Article_05.jpg)
No gutter
components/Grid.js
<Row>
<Column colMd={4} colLg={4} noGutterSm>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4} noGutterSm>
![Grid Example](images/Article_05.jpg)
Offset
components/Grid.js
<Row>
<Column colMd={4} colLg={4} offsetLg={4}>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4}>
![Grid Example](images/Article_05.jpg)
Column 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
colXlnumberSpecify the col width at x-large breakpoint
colMaxnumberSpecify the col width at max breakpoint
offsetSmnumberSpecify the col offset at small breakpoint
offsetMdnumberSpecify the col offset at medium breakpoint
offsetLgnumberSpecify the col offset at large breakpoint
offsetXlnumberSpecify the col offset at x-large breakpoint
offsetMaxnumberSpecify the col offset at max breakpoint
noGutterSmboolSpecify no-gutter at small breakpoint
noGutterMdboolSpecify no-gutter at medium breakpoint
noGutterLgboolSpecify no-gutter at large breakpoint
noGutterXlboolSpecify no-gutter at x-large breakpoint
noGutterMaxboolSpecify no-gutter at max breakpoint
noGutterSmLeftboolSpecify no-gutter left at small breakpoint
noGutterMdLeftboolSpecify no-gutter left at medium breakpoint
noGutterLgLeftboolSpecify no-gutter left at large breakpoint
noGutterXlLeftboolSpecify no-gutter left at x-large breakpoint
noGutterMaxLeftboolSpecify no-gutter left at max breakpoint
gutterLgboolSpecify to explictly bring back gutters at the large breakpoint. Used almost exclusivly with noGutterSm when you need content to have no gutters on mobile and bring the gutters back for desktops.