React

Grid

ExamplesPropsCSS variables

Examples

Simple grid

Copied to clipboard

Grid with gutters

Copied to clipboard

Grid with overrides

Copied to clipboard

Props

GridItem props

The GridItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Grid Layout Item
classNamestring''additional classes added to the Grid Layout Item
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
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
offset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12nullthe number of columns a grid item is offset
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Grid props

The Grid component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Grid layout
classNamestring''additional classes added to the Grid layout
gutter'sm' | 'md' | 'lg'nullAdds space between children.
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
sm1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns all grid items should span on a small 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
lg1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12the number of columns all grid items should span on a large device
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

CSS variables

--pf-l-grid__item--GridColumnEndl_grid__item_GridColumnEndspan 12
--pf-l-grid__item--GridColumnStartl_grid__item_GridColumnStartcol-start 13
--pf-l-grid--m-gutter--GridGapl_grid_m_gutter_GridGap1.5rem
--pf-l-grid--m-gutter--md--GridGapl_grid_m_gutter_md_GridGap1rem