Examples
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
With overrides
span = 3 rowSpan= 2
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Ordering
Grouped ordering
Set 1, Item A
Set 1, Item B
Set 1, Item C
Set 1, Item D
Set 2, Item A
Set 2, Item B
Set 2, Item C
Set 2, Item D
Props
Grid
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | content rendered inside the Grid layout |
| className | string | '' | additional classes added to the Grid layout |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | Sets the base component to render. defaults to div |
| hasGutter | boolean | Adds space between children. | |
| lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns all grid items should span on a large device | |
| md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns all grid items should span on a medium device | |
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; } | Modifies the flex layout element order property | |
| sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns all grid items should span on a small device | |
| span | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | The number of rows a column in the grid should span. Value should be a number 1-12 |
| xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 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 | the number of columns all grid items should span on a 2xLarge device |
GridItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | content rendered inside the Grid Layout Item |
| className | string | '' | additional classes added to the Grid Layout Item |
| component | React.ElementType<any> | React.ComponentType<any> | 'div' | Sets the base component to render. defaults to div |
| lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns 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 | the number of columns the grid item is offset on large device. Value should be a number 1-12 | |
| lgRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of rows the grid item spans on large device. Value should be a number 1-12 | |
| md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns 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 | the number of columns the grid item is offset on medium device. Value should be a number 1-12 | |
| mdRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of rows the grid item spans on medium device. Value should be a number 1-12 | |
| offset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null | the number of columns a grid item is offset |
| order | { default?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; } | Modifies the flex layout element order property | |
| rowSpan | 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 |
| sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns the grid item spans on small device. Value should be a number 1-12 | |
| smOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns the grid item is offset on small device. Value should be a number 1-12 | |
| smRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of rows the grid item spans on medium device. Value should be a number 1-12 | |
| span | 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 |
| xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns the grid item spans on xLarge device. Value should be a number 1-12 | |
| xl2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns 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 | the number of columns the grid item is offset on 2xLarge device. Value should be a number 1-12 | |
| xl2RowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of rows the grid item spans on 2xLarge device. Value should be a number 1-12 | |
| xlOffset | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of columns the grid item is offset on xLarge device. Value should be a number 1-12 | |
| xlRowSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | the number of rows the grid item spans on large device. Value should be a number 1-12 |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-l-grid) | --pf-v6-l-grid--m-gutter--GridGap | 1rem | ||
| ||||
| :where(:root, .pf-v6-l-grid) | --pf-v6-l-grid__item--GridColumnStart | auto | ||
| :where(:root, .pf-v6-l-grid) | --pf-v6-l-grid__item--GridColumnEnd | span 12 | ||
| :where(:root, .pf-v6-l-grid) | --pf-v6-l-grid--item--Order | 0 | ||
| .pf-v6-l-grid.pf-m-all-1-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 1 | ||
| .pf-v6-l-grid.pf-m-all-2-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 2 | ||
| .pf-v6-l-grid.pf-m-all-3-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 3 | ||
| .pf-v6-l-grid.pf-m-all-4-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 4 | ||
| .pf-v6-l-grid.pf-m-all-5-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 5 | ||
| .pf-v6-l-grid.pf-m-all-6-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 6 | ||
| .pf-v6-l-grid.pf-m-all-7-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 7 | ||
| .pf-v6-l-grid.pf-m-all-8-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 8 | ||
| .pf-v6-l-grid.pf-m-all-9-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 9 | ||
| .pf-v6-l-grid.pf-m-all-10-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 10 | ||
| .pf-v6-l-grid.pf-m-all-11-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 11 | ||
| .pf-v6-l-grid.pf-m-all-12-col > * | --pf-v6-l-grid__item--GridColumnEnd | span 12 | ||
| .pf-v6-l-grid > .pf-m-1-col | --pf-v6-l-grid__item--GridColumnEnd | span 1 | ||
| .pf-v6-l-grid > .pf-m-2-col | --pf-v6-l-grid__item--GridColumnEnd | span 2 | ||
| .pf-v6-l-grid > .pf-m-3-col | --pf-v6-l-grid__item--GridColumnEnd | span 3 | ||
| .pf-v6-l-grid > .pf-m-4-col | --pf-v6-l-grid__item--GridColumnEnd | span 4 | ||
| .pf-v6-l-grid > .pf-m-5-col | --pf-v6-l-grid__item--GridColumnEnd | span 5 | ||
| .pf-v6-l-grid > .pf-m-6-col | --pf-v6-l-grid__item--GridColumnEnd | span 6 | ||
| .pf-v6-l-grid > .pf-m-7-col | --pf-v6-l-grid__item--GridColumnEnd | span 7 | ||
| .pf-v6-l-grid > .pf-m-8-col | --pf-v6-l-grid__item--GridColumnEnd | span 8 | ||
| .pf-v6-l-grid > .pf-m-9-col | --pf-v6-l-grid__item--GridColumnEnd | span 9 | ||
| .pf-v6-l-grid > .pf-m-10-col | --pf-v6-l-grid__item--GridColumnEnd | span 10 | ||
| .pf-v6-l-grid > .pf-m-11-col | --pf-v6-l-grid__item--GridColumnEnd | span 11 | ||
| .pf-v6-l-grid > .pf-m-12-col | --pf-v6-l-grid__item--GridColumnEnd | span 12 | ||
| .pf-v6-l-grid > .pf-m-offset-1-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(1 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-2-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(2 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-3-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(3 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-4-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(4 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-5-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(5 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-6-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(6 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-7-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(7 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-8-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(8 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-9-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(9 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-10-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(10 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-11-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(11 + 1) | ||
| .pf-v6-l-grid > .pf-m-offset-12-col | --pf-v6-l-grid__item--GridColumnStart | col-start calc(12 + 1) | ||
