Skip to content
PatternFly logo

Grid

Examples

Smart (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

Smart 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

Base

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

Gutter

12 col
11 col
1 col
10 col
2 col
9 col
3 col

Responsive

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

Nested

12 col
10 col
6 col
6 col
4 col
8 col
2 col

Offsets

11 col, offset 1
10 col, offset 2
9 col, offset 3
8 col, offset 4

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

Ordering

Ordering - Ordering can be applied to nested .pf-l-grid and .pf-l-grid__items. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as --pf-l-grid--item--Order{-on-[breakpoint]}: {order}.

Ordering example

Item A
Item B
Item C

Responsive ordering

Item A
Item B
Item C

Grouped ordering

Set 1, Item A
Set 1, Item B
Set 1, Item C
Set 1, Item D
Set 2, Item A
Set 2, Item B
Set 2, Item C
Set 2, Item D

Grouped, responsive ordering

Set 1, Item A
Set 1, Item B
Set 1, Item C
Set 1, Item D
Set 2, Item A
Set 2, Item B
Set 2, Item C
Set 2, Item D

List type

  • item 1
  • item 2
  • item 3
  • item 4

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 at optional breakpoint.
.pf-m-{1-12}-col{-on-[breakpoint]}
.pf-l-grid__item
Defines grid item size at optional breakpoint. 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 at optional breakpoint. 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.
--pf-l-grid--item--Order{-on-[breakpoint]}: {order}
.pf-l-grid > .pf-l-grid, .pf-l-grid__item
Modifies the order of the grid layout element at optional breakpoint.

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