React

Grid

ExamplesPropsCSS Variables

Examples

Simple grid

Copied to clipboard

Grid with gutters

Copied to clipboard

Grid with overrides

Copied to clipboard

Props

Grid Props

The Grid component accepts the following props.

NameTypeRequiredDefaultDescription
childrenanynullcontent rendered inside the Grid layout
classNamestring''additional classes added to the Grid layout
gutterenumnullAdds space between children. Options are sm, md or lg
spancustomnullThe number of rows a column in the grid should span. Value should be a number 1-12
smcustomnullthe number of columns all grid items should span on a small device
mdcustomnullthe number of columns all grid items should span on a medium device
lgcustomnullthe number of columns all grid items should span on a large device
xlcustomnullthe number of columns all grid items should span on a xLarge device
xl2customnullthe number of columns all grid items should span on a 2xLarge device

GridItem Props

The GridItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrenanynullcontent rendered inside the Grid Layout Item
classNamestring''additional classes added to the Grid Layout Item
spanenumnullthe number of columns the grid item spans. Value should be a number 1-12
rowSpanenumnullthe number of rows the grid item spans. Value should be a number 1-12
offsetenumnullthe number of columns a grid item is offset
smenumnullthe number of columns the grid item spans on small device. Value should be a number 1-12
smRowSpanenumnullthe number of rows the grid item spans on medium device. Value should be a number 1-12
smOffsetenumnullthe number of columns the grid item is offset on small device. Value should be a number 1-12
mdenumnullthe number of columns the grid item spans on medium device. Value should be a number 1-12
mdRowSpanenumnullthe number of rows the grid item spans on medium device. Value should be a number 1-12
mdOffsetenumnullthe number of columns the grid item is offset on medium device. Value should be a number 1-12
lgenumnullthe number of columns the grid item spans on large device. Value should be a number 1-12
lgRowSpanenumnullthe number of rows the grid item spans on large device. Value should be a number 1-12
lgOffsetenumnullthe number of columns the grid item is offset on large device. Value should be a number 1-12
xlenumnullthe number of columns the grid item spans on xLarge device. Value should be a number 1-12
xlRowSpanenumnullthe number of rows the grid item spans on large device. Value should be a number 1-12
xlOffsetenumnullthe number of columns the grid item is offset on xLarge device. Value should be a number 1-12
xl2enumnullthe number of columns the grid item spans on 2xLarge device. Value should be a number 1-12
xl2RowSpanenumnullthe number of rows the grid item spans on 2xLarge device. Value should be a number 1-12
xl2Offsetenumnullthe number of columns the grid item is offset on 2xLarge device. Value should be a number 1-12

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