Grid

Examples

Basic

span = 8

span = 4, rowSpan = 2

span = 2, rowSpan = 3

span = 2

span = 4

span = 2

span = 4

span = 2

span = 4

With gutters

span = 8

span = 4, rowSpan = 2

span = 2, rowSpan = 3

span = 2

span = 4

span = 2

span = 4

span = 2

span = 4

With overrides

span = 3 rowSpan= 2

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
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

*required
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
	.pf-v5-l-grid	--pf-v5-l-grid--m-gutter--GridGap	1rem
--pf-v5-l-grid--m-gutter--GridGap --pf-v5-global--gutter $pf-v5-global--gutter $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-l-grid	--pf-v5-l-grid__item--GridColumnStart	auto
	.pf-v5-l-grid	--pf-v5-l-grid__item--GridColumnEnd	span 12
	.pf-v5-l-grid	--pf-v5-l-grid--item--Order	0
	.pf-v5-l-grid.pf-m-all-1-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 1
	.pf-v5-l-grid.pf-m-all-2-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 2
	.pf-v5-l-grid.pf-m-all-3-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 3
	.pf-v5-l-grid.pf-m-all-4-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 4
	.pf-v5-l-grid.pf-m-all-5-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 5
	.pf-v5-l-grid.pf-m-all-6-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 6
	.pf-v5-l-grid.pf-m-all-7-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 7
	.pf-v5-l-grid.pf-m-all-8-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 8
	.pf-v5-l-grid.pf-m-all-9-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 9
	.pf-v5-l-grid.pf-m-all-10-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 10
	.pf-v5-l-grid.pf-m-all-11-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 11
	.pf-v5-l-grid.pf-m-all-12-col > *	--pf-v5-l-grid__item--GridColumnEnd	span 12
	.pf-v5-l-grid > .pf-m-1-col	--pf-v5-l-grid__item--GridColumnEnd	span 1
	.pf-v5-l-grid > .pf-m-2-col	--pf-v5-l-grid__item--GridColumnEnd	span 2
	.pf-v5-l-grid > .pf-m-3-col	--pf-v5-l-grid__item--GridColumnEnd	span 3
	.pf-v5-l-grid > .pf-m-4-col	--pf-v5-l-grid__item--GridColumnEnd	span 4
	.pf-v5-l-grid > .pf-m-5-col	--pf-v5-l-grid__item--GridColumnEnd	span 5
	.pf-v5-l-grid > .pf-m-6-col	--pf-v5-l-grid__item--GridColumnEnd	span 6
	.pf-v5-l-grid > .pf-m-7-col	--pf-v5-l-grid__item--GridColumnEnd	span 7
	.pf-v5-l-grid > .pf-m-8-col	--pf-v5-l-grid__item--GridColumnEnd	span 8
	.pf-v5-l-grid > .pf-m-9-col	--pf-v5-l-grid__item--GridColumnEnd	span 9
	.pf-v5-l-grid > .pf-m-10-col	--pf-v5-l-grid__item--GridColumnEnd	span 10
	.pf-v5-l-grid > .pf-m-11-col	--pf-v5-l-grid__item--GridColumnEnd	span 11
	.pf-v5-l-grid > .pf-m-12-col	--pf-v5-l-grid__item--GridColumnEnd	span 12
	.pf-v5-l-grid > .pf-m-offset-1-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(1 + 1)
	.pf-v5-l-grid > .pf-m-offset-2-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(2 + 1)
	.pf-v5-l-grid > .pf-m-offset-3-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(3 + 1)
	.pf-v5-l-grid > .pf-m-offset-4-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(4 + 1)
	.pf-v5-l-grid > .pf-m-offset-5-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(5 + 1)
	.pf-v5-l-grid > .pf-m-offset-6-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(6 + 1)
	.pf-v5-l-grid > .pf-m-offset-7-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(7 + 1)
	.pf-v5-l-grid > .pf-m-offset-8-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(8 + 1)
	.pf-v5-l-grid > .pf-m-offset-9-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(9 + 1)
	.pf-v5-l-grid > .pf-m-offset-10-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(10 + 1)
	.pf-v5-l-grid > .pf-m-offset-11-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(11 + 1)
	.pf-v5-l-grid > .pf-m-offset-12-col	--pf-v5-l-grid__item--GridColumnStart	col-start calc(12 + 1)

View source on GitHub