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

property	propType	required	default	description
children	node
className	string			Add 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

No gutter left

No gutter

Offset

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)
  </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)
  </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)
  </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>
</Row>

Column props

property	propType	default	description
children	node
className	string		Add custom class name
colSm	number		Specify the col width at small breakpoint
colMd	number		Specify the col width at medium breakpoint
colLg	number	12	Specify the col width at large breakpoint
colXl	number		Specify the col width at x-large breakpoint
colMax	number		Specify the col width at max breakpoint
offsetSm	number		Specify the col offset at small breakpoint
offsetMd	number		Specify the col offset at medium breakpoint
offsetLg	number		Specify the col offset at large breakpoint
offsetXl	number		Specify the col offset at x-large breakpoint
offsetMax	number		Specify the col offset at max breakpoint
noGutterSm	bool		Specify no-gutter at small breakpoint
noGutterMd	bool		Specify no-gutter at medium breakpoint
noGutterLg	bool		Specify no-gutter at large breakpoint
noGutterXl	bool		Specify no-gutter at x-large breakpoint
noGutterMax	bool		Specify no-gutter at max breakpoint
noGutterSmLeft	bool		Specify no-gutter left at small breakpoint
noGutterMdLeft	bool		Specify no-gutter left at medium breakpoint
noGutterLgLeft	bool		Specify no-gutter left at large breakpoint
noGutterXlLeft	bool		Specify no-gutter left at x-large breakpoint
noGutterMaxLeft	bool		Specify no-gutter left at max breakpoint
gutterLg	bool		Specify 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.

Edit this page on GitHub

Components: GifPlayer

Components: ImageCard