HTML

Grid

ExamplesDocumentationCSS Variables

Examples

Smart grid (responsive)

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
Copied to clipboard

Smart grid with overrides (responsive)

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14
Copied to clipboard

Base grid

12 col
11 col
1 col
10 col
2 col
9 col
3 col
8 col
4 col
7 col
5 col
Copied to clipboard

Grid gutter

12 col
11 col
1 col
10 col
2 col
9 col
3 col
Copied to clipboard

Responsive grid

1 / 6 / 11 col
11 / 6 / 1 col
2 / 6 / 10 col
10 / 6 / 2 col
3 / 6 / 9 col
9 / 6 / 3 col
4 / 6 / 8 col
8 / 6 / 4 col
5 / 6 / 7 col
7 / 6 / 5 col
Copied to clipboard

Nested grids

12 col
10 col
6 col
6 col
4 col
8 col
2 col
Copied to clipboard

Offsets

11 col, offset 1
10 col, offset 2
9 col, offset 3
8 col, offset 4
Copied to clipboard

Row spans

8 col
4 col, 2 row
2 col, 3 row
2 col
4 col
2 col
2 col
2 col
4 col
2 col
4 col
4 col
Copied to clipboard

Documentation

Overview

The grid layout is based on CSS Grid’s two-dimensional system of columns and rows. This layout styles the parent element and its children to achieve responsive column and row spans as well as gutters.

Usage

Class Applied to Outcome
.pf-l-grid <div> Initializes the grid layout.
.pf-l-grid__item <div> Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.
.pf-m-gutter .pf-l-grid Adds space between children by using the globally defined gutter value.
.pf-m-all-{1-12}-col{-on-[breakpoint]} .pf-l-grid Defines grid item size on grid container.
.pf-m-{1-12}-col{-on-[breakpoint]} .pf-l-grid__item Defines grid item size. Although not required, they are strongly suggested. If not used, grid item will default to 12 col.
.pf-m-{2-x}-row{-on-[breakpoint]} .pf-l-grid__item Defines grid item row span. For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows.

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