Grid
<Row>
<Column>
Row
The
<Row>
cds--row
<Column>
Code
Row props<Row><Column>Content or additional <Components /></Column></Row>
property | propType | required | default | description |
---|---|---|---|---|
children | node | |||
className | string | Add custom class name |
Column
The
<Column>
Example
Code
No gutter left<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<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)
Offset<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 props<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)
property | propType | required | 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
|