Skip to Content
Patternfly Logo

Grid

Use a Grid to layout content on a fixed-size 12 column 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.ReactNodeNonullcontent rendered inside the Grid layout
classNamestringNo''additional classes added to the Grid layout
gutter'sm' | 'md' | 'lg'NonullAdds space between children.
span1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12NonullThe 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 | 12Nothe number of columns all grid items should span on a small device
md1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nothe number of columns all grid items should span on a medium device
lg1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nothe number of columns all grid items should span on a large device
xl1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nothe number of columns all grid items should span on a xLarge device
xl21 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nothe number of columns all grid items should span on a 2xLarge device
GridItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullcontent rendered inside the Grid Layout Item
classNamestringNo''additional classes added to the Grid Layout Item
span1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nonullthe 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 | 12Nonullthe 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 | 12Nonullthe number of columns a grid item is offset
sm1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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 | 12Nothe 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