Grid
Examples
Simple Grid
Grid with gutters
Grid With Overrides
Grid Props
The Grid component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | any | null | content rendered inside the Grid layout | |
| className | string | '' | additional classes added to the Grid layout | |
| gutter | enum | null | Adds space between children. Options are sm, md or lg | |
| span | custom | null | The number of rows a column in the grid should span. Value should be a number 1-12 | |
| sm | custom | null | the number of columns all grid items should span on a small device | |
| md | custom | null | the number of columns all grid items should span on a medium device | |
| lg | custom | null | the number of columns all grid items should span on a large device | |
| xl | custom | null | the number of columns all grid items should span on a xLarge device |
GridItem Props
The GridItem component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | any | null | content rendered inside the Grid Layout Item | |
| className | string | '' | additional classes added to the Grid Layout Item | |
| span | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item spans. Value should be a number 1-12 | |
| rowSpan | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of rows the grid item spans. Value should be a number 1-12 | |
| offset | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns a grid item is offset | |
| sm | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item spans on small device. Value should be a number 1-12 | |
| smRowSpan | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of rows the grid item spans on medium device. Value should be a number 1-12 | |
| smOffset | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item is offset on small device. Value should be a number 1-12 | |
| md | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item spans on medium device. Value should be a number 1-12 | |
| mdRowSpan | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of rows the grid item spans on medium device. Value should be a number 1-12 | |
| mdOffset | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item is offset on medium device. Value should be a number 1-12 | |
| lg | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item spans on large device. Value should be a number 1-12 | |
| lgRowSpan | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of rows the grid item spans on large device. Value should be a number 1-12 | |
| lgOffset | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item is offset on large device. Value should be a number 1-12 | |
| xl | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item spans on xLarge device. Value should be a number 1-12 | |
| xlRowSpan | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of rows the grid item spans on large device. Value should be a number 1-12 | |
| xlOffset | enum: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | null | the number of columns the grid item is offset on xLarge device. Value should be a number 1-12 |