React

Grid

ExamplesCSS Variables

Examples

Simple grid

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
Copied to clipboard

Grid 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
Copied to clipboard

Grid 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
Copied to clipboard

Grid playground

1
2
3
4
1
3
1
1
2
3
1
1
3
3
1
1
4
3
1
1

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