React

Grid

ExamplesPropsCSS Variables

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

Props

Grid properties
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
GridItem properties
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

CSS Variables

--pf-l-grid__item--GridColumnEndl_grid__item_GridColumnEnd
span 12
--pf-l-grid__item--GridColumnStartl_grid__item_GridColumnStart
col-start 13
--pf-l-grid--m-gutter--GridGapl_grid_m_gutter_GridGap
1.5rem
--pf-l-grid--m-gutter--md--GridGapl_grid_m_gutter_md_GridGap
1rem