Grid

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

Standard ordering

Item A
Item B
Item C

Responsive ordering

Item A
Item B
Item C

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

Alternative components

  • Grid item
  • Grid item
  • Grid item
  • Grid item
  • Grid item

Props

Grid

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Grid layout
classNamestring''additional classes added to the Grid layout
componentReact.ElementType<any> | React.ComponentType<any>'div'Sets the base component to render. defaults to div
hasGutterbooleanAdds space between children.
lg1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns all grid items should span on a large device
md1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the 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
sm1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns all grid items should span on a small device
span1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12nullThe number of rows a column in the grid should span. Value should be a number 1-12
xl1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns all grid items should span on a xLarge device
xl21 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns all grid items should span on a 2xLarge device

GridItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Grid Layout Item
classNamestring''additional classes added to the Grid Layout Item
componentReact.ElementType<any> | React.ComponentType<any>'div'Sets the base component to render. defaults to div
lg1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item spans on large device. Value should be a number 1-12
lgOffset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item is offset on large device. Value should be a number 1-12
lgRowSpan1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of rows the grid item spans on large device. Value should be a number 1-12
md1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item spans on medium device. Value should be a number 1-12
mdOffset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item is offset on medium device. Value should be a number 1-12
mdRowSpan1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of rows the grid item spans on medium device. Value should be a number 1-12
offset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12nullthe 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
rowSpan1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12nullthe number of rows the grid item spans. Value should be a number 1-12
sm1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item spans on small device. Value should be a number 1-12
smOffset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item is offset on small device. Value should be a number 1-12
smRowSpan1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of rows the grid item spans on medium device. Value should be a number 1-12
span1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12nullthe number of columns the grid item spans. Value should be a number 1-12
xl1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item spans on xLarge device. Value should be a number 1-12
xl21 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item spans on 2xLarge device. Value should be a number 1-12
xl2Offset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item is offset on 2xLarge device. Value should be a number 1-12
xl2RowSpan1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of rows the grid item spans on 2xLarge device. Value should be a number 1-12
xlOffset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns the grid item is offset on xLarge device. Value should be a number 1-12
xlRowSpan1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of rows the grid item spans on large device. Value should be a number 1-12

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-l-grid)--pf-v6-l-grid--m-gutter--GridGap
24px
: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)

View source on GitHub