Patternfly Logo

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
hasGutterbooleanNoAdds space between children.
lg1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nothe number of columns all grid items should span on a large 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
sm1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nothe number of columns all grid items should span on a small device
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
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
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
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
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
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
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
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
offset1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12Nonullthe number of columns a grid item is offset
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
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
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
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
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
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
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
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
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
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
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

CSS variables

.pf-l-grid--pf-l-grid--m-gutter--GridGap
1rem
.pf-l-grid--pf-l-grid__item--GridColumnStart
auto
.pf-l-grid--pf-l-grid__item--GridColumnEnd
span 12
.pf-l-grid--pf-l-grid--item--Order
0
.pf-l-grid.pf-m-all-1-col > *--pf-l-grid__item--GridColumnEnd
span 1
.pf-l-grid.pf-m-all-2-col > *--pf-l-grid__item--GridColumnEnd
span 2
.pf-l-grid.pf-m-all-3-col > *--pf-l-grid__item--GridColumnEnd
span 3
.pf-l-grid.pf-m-all-4-col > *--pf-l-grid__item--GridColumnEnd
span 4
.pf-l-grid.pf-m-all-5-col > *--pf-l-grid__item--GridColumnEnd
span 5
.pf-l-grid.pf-m-all-6-col > *--pf-l-grid__item--GridColumnEnd
span 6
.pf-l-grid.pf-m-all-7-col > *--pf-l-grid__item--GridColumnEnd
span 7
.pf-l-grid.pf-m-all-8-col > *--pf-l-grid__item--GridColumnEnd
span 8
.pf-l-grid.pf-m-all-9-col > *--pf-l-grid__item--GridColumnEnd
span 9
.pf-l-grid.pf-m-all-10-col > *--pf-l-grid__item--GridColumnEnd
span 10
.pf-l-grid.pf-m-all-11-col > *--pf-l-grid__item--GridColumnEnd
span 11
.pf-l-grid.pf-m-all-12-col > *--pf-l-grid__item--GridColumnEnd
span 12
.pf-l-grid > .pf-m-1-col--pf-l-grid__item--GridColumnEnd
span 1
.pf-l-grid > .pf-m-2-col--pf-l-grid__item--GridColumnEnd
span 2
.pf-l-grid > .pf-m-3-col--pf-l-grid__item--GridColumnEnd
span 3
.pf-l-grid > .pf-m-4-col--pf-l-grid__item--GridColumnEnd
span 4
.pf-l-grid > .pf-m-5-col--pf-l-grid__item--GridColumnEnd
span 5
.pf-l-grid > .pf-m-6-col--pf-l-grid__item--GridColumnEnd
span 6
.pf-l-grid > .pf-m-7-col--pf-l-grid__item--GridColumnEnd
span 7
.pf-l-grid > .pf-m-8-col--pf-l-grid__item--GridColumnEnd
span 8
.pf-l-grid > .pf-m-9-col--pf-l-grid__item--GridColumnEnd
span 9
.pf-l-grid > .pf-m-10-col--pf-l-grid__item--GridColumnEnd
span 10
.pf-l-grid > .pf-m-11-col--pf-l-grid__item--GridColumnEnd
span 11
.pf-l-grid > .pf-m-12-col--pf-l-grid__item--GridColumnEnd
span 12
.pf-l-grid > .pf-m-offset-1-col--pf-l-grid__item--GridColumnStart
col-start calc(1 + 1)
.pf-l-grid > .pf-m-offset-2-col--pf-l-grid__item--GridColumnStart
col-start calc(2 + 1)
.pf-l-grid > .pf-m-offset-3-col--pf-l-grid__item--GridColumnStart
col-start calc(3 + 1)
.pf-l-grid > .pf-m-offset-4-col--pf-l-grid__item--GridColumnStart
col-start calc(4 + 1)
.pf-l-grid > .pf-m-offset-5-col--pf-l-grid__item--GridColumnStart
col-start calc(5 + 1)
.pf-l-grid > .pf-m-offset-6-col--pf-l-grid__item--GridColumnStart
col-start calc(6 + 1)
.pf-l-grid > .pf-m-offset-7-col--pf-l-grid__item--GridColumnStart
col-start calc(7 + 1)
.pf-l-grid > .pf-m-offset-8-col--pf-l-grid__item--GridColumnStart
col-start calc(8 + 1)
.pf-l-grid > .pf-m-offset-9-col--pf-l-grid__item--GridColumnStart
col-start calc(9 + 1)
.pf-l-grid > .pf-m-offset-10-col--pf-l-grid__item--GridColumnStart
col-start calc(10 + 1)
.pf-l-grid > .pf-m-offset-11-col--pf-l-grid__item--GridColumnStart
col-start calc(11 + 1)
.pf-l-grid > .pf-m-offset-12-col--pf-l-grid__item--GridColumnStart
col-start calc(12 + 1)

View source on GitHub