Grid
Use a Grid to layout content on a fixed-size 12 column grid.
ExamplesPropsCSS VariablesExamples
Basic
span = 8
span = 4, rowSpan = 2
span = 2, rowSpan = 3
span = 2
span = 4
span = 2
span = 2
span = 2
span = 4
span = 2
span = 4
span = 4
With gutters
span = 8
span = 4, rowSpan = 2
span = 2, rowSpan = 3
span = 2
span = 4
span = 2
span = 2
span = 2
span = 4
span = 2
span = 4
span = 4
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | content rendered inside the Grid layout |
| className | string | No | '' | additional classes added to the Grid layout |
| hasGutter | boolean | No | Adds space between children. | |
| span | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | null | The number of rows a column in the grid should span. Value should be a number 1-12 |
| sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns all grid items should span on a small device | |
| md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns all grid items should span on a medium device | |
| lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns all grid items should span on a large device | |
| xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns all grid items should span on a xLarge device | |
| xl2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns all grid items should span on a 2xLarge device |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | content rendered inside the Grid Layout Item |
| className | string | No | '' | additional classes added to the Grid Layout Item |
| span | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | null | the number of columns the grid item spans. Value should be a number 1-12 |
| rowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | null | the number of rows the grid item spans. Value should be a number 1-12 |
| offset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | null | the number of columns a grid item is offset |
| sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item spans on small device. Value should be a number 1-12 | |
| smRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of rows the grid item spans on medium device. Value should be a number 1-12 | |
| smOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item is offset on small device. Value should be a number 1-12 | |
| md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item spans on medium device. Value should be a number 1-12 | |
| mdRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of rows the grid item spans on medium device. Value should be a number 1-12 | |
| mdOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item is offset on medium device. Value should be a number 1-12 | |
| lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item spans on large device. Value should be a number 1-12 | |
| lgRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of rows the grid item spans on large device. Value should be a number 1-12 | |
| lgOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item is offset on large device. Value should be a number 1-12 | |
| xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item spans on xLarge device. Value should be a number 1-12 | |
| xlRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of rows the grid item spans on large device. Value should be a number 1-12 | |
| xlOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item is offset on xLarge device. Value should be a number 1-12 | |
| xl2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item spans on 2xLarge device. Value should be a number 1-12 | |
| xl2RowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of rows the grid item spans on 2xLarge device. Value should be a number 1-12 | |
| xl2Offset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | No | the number of columns the grid item is offset on 2xLarge device. Value should be a number 1-12 |
CSS Variables
| .pf-l-grid | --pf-l-grid--m-gutter--GridGap | 1rem | ||
| .pf-l-grid | --pf-l-grid__item--GridColumnStart | auto | ||
| .pf-l-grid | --pf-l-grid__item--GridColumnEnd | span 12 | ||
| .pf-l-grid.pf-m-all-1-col > * | --pf-l-grid__item--GridColumnEnd | span 1 | ||
| .pf-l-grid.pf-m-all-2-col > * | --pf-l-grid__item--GridColumnEnd | span 2 | ||
| .pf-l-grid.pf-m-all-3-col > * | --pf-l-grid__item--GridColumnEnd | span 3 | ||
| .pf-l-grid.pf-m-all-4-col > * | --pf-l-grid__item--GridColumnEnd | span 4 | ||
| .pf-l-grid.pf-m-all-5-col > * | --pf-l-grid__item--GridColumnEnd | span 5 | ||
| .pf-l-grid.pf-m-all-6-col > * | --pf-l-grid__item--GridColumnEnd | span 6 | ||
| .pf-l-grid.pf-m-all-7-col > * | --pf-l-grid__item--GridColumnEnd | span 7 | ||
| .pf-l-grid.pf-m-all-8-col > * | --pf-l-grid__item--GridColumnEnd | span 8 | ||
| .pf-l-grid.pf-m-all-9-col > * | --pf-l-grid__item--GridColumnEnd | span 9 | ||
| .pf-l-grid.pf-m-all-10-col > * | --pf-l-grid__item--GridColumnEnd | span 10 | ||
| .pf-l-grid.pf-m-all-11-col > * | --pf-l-grid__item--GridColumnEnd | span 11 | ||
| .pf-l-grid.pf-m-all-12-col > * | --pf-l-grid__item--GridColumnEnd | span 12 | ||
| .pf-l-grid > .pf-m-1-col | --pf-l-grid__item--GridColumnEnd | span 1 | ||
| .pf-l-grid > .pf-m-2-col | --pf-l-grid__item--GridColumnEnd | span 2 | ||
| .pf-l-grid > .pf-m-3-col | --pf-l-grid__item--GridColumnEnd | span 3 | ||
| .pf-l-grid > .pf-m-4-col | --pf-l-grid__item--GridColumnEnd | span 4 | ||
| .pf-l-grid > .pf-m-5-col | --pf-l-grid__item--GridColumnEnd | span 5 | ||
| .pf-l-grid > .pf-m-6-col | --pf-l-grid__item--GridColumnEnd | span 6 | ||
| .pf-l-grid > .pf-m-7-col | --pf-l-grid__item--GridColumnEnd | span 7 | ||
| .pf-l-grid > .pf-m-8-col | --pf-l-grid__item--GridColumnEnd | span 8 | ||
| .pf-l-grid > .pf-m-9-col | --pf-l-grid__item--GridColumnEnd | span 9 | ||
| .pf-l-grid > .pf-m-10-col | --pf-l-grid__item--GridColumnEnd | span 10 | ||
| .pf-l-grid > .pf-m-11-col | --pf-l-grid__item--GridColumnEnd | span 11 | ||
| .pf-l-grid > .pf-m-12-col | --pf-l-grid__item--GridColumnEnd | span 12 | ||
| .pf-l-grid > .pf-m-offset-1-col | --pf-l-grid__item--GridColumnStart | col-start calc(1 + 1) | ||
| .pf-l-grid > .pf-m-offset-2-col | --pf-l-grid__item--GridColumnStart | col-start calc(2 + 1) | ||
| .pf-l-grid > .pf-m-offset-3-col | --pf-l-grid__item--GridColumnStart | col-start calc(3 + 1) | ||
| .pf-l-grid > .pf-m-offset-4-col | --pf-l-grid__item--GridColumnStart | col-start calc(4 + 1) | ||
| .pf-l-grid > .pf-m-offset-5-col | --pf-l-grid__item--GridColumnStart | col-start calc(5 + 1) | ||
| .pf-l-grid > .pf-m-offset-6-col | --pf-l-grid__item--GridColumnStart | col-start calc(6 + 1) | ||
| .pf-l-grid > .pf-m-offset-7-col | --pf-l-grid__item--GridColumnStart | col-start calc(7 + 1) | ||
| .pf-l-grid > .pf-m-offset-8-col | --pf-l-grid__item--GridColumnStart | col-start calc(8 + 1) | ||
| .pf-l-grid > .pf-m-offset-9-col | --pf-l-grid__item--GridColumnStart | col-start calc(9 + 1) | ||
| .pf-l-grid > .pf-m-offset-10-col | --pf-l-grid__item--GridColumnStart | col-start calc(10 + 1) | ||
| .pf-l-grid > .pf-m-offset-11-col | --pf-l-grid__item--GridColumnStart | col-start calc(11 + 1) | ||
| .pf-l-grid > .pf-m-offset-12-col | --pf-l-grid__item--GridColumnStart | col-start calc(12 + 1) | ||
