PF Next

Grid

Smart grid (responsive)

Preview

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
<div class="pf-l-grid pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-2-col-on-lg pf-m-all-1-col-on-xl">
  <div class="pf-l-grid__item">
    item 1
  </div>
  <div class="pf-l-grid__item">
    item 2
  </div>
  <div class="pf-l-grid__item">
    item 3
  </div>
  <div class="pf-l-grid__item">
    item 4
  </div>
  <div class="pf-l-grid__item">
    item 5
  </div>
  <div class="pf-l-grid__item">
    item 6
  </div>
  <div class="pf-l-grid__item">
    item 7
  </div>
  <div class="pf-l-grid__item">
    item 8
  </div>
  <div class="pf-l-grid__item">
    item 9
  </div>
  <div class="pf-l-grid__item">
    item 10
  </div>
  <div class="pf-l-grid__item">
    item 11
  </div>
  <div class="pf-l-grid__item">
    item 12
  </div>
</div>

Smart grid with overrides (responsive)

Preview

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
<div class="pf-l-grid pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-2-col-on-lg pf-m-all-1-col-on-xl">
  <div class="pf-l-grid__item pf-m-8-col-on-sm pf-m-4-col-on-lg pf-m-6-col-on-xl">
    item 1
  </div>
  <div class="pf-l-grid__item pf-m-4-col-on-sm pf-m-8-col-on-lg pf-m-6-col-on-xl">
    item 2
  </div>
  <div class="pf-l-grid__item">
    item 3
  </div>
  <div class="pf-l-grid__item">
    item 4
  </div>
  <div class="pf-l-grid__item">
    item 5
  </div>
  <div class="pf-l-grid__item">
    item 6
  </div>
  <div class="pf-l-grid__item">
    item 7
  </div>
  <div class="pf-l-grid__item">
    item 8
  </div>
  <div class="pf-l-grid__item">
    item 9
  </div>
  <div class="pf-l-grid__item">
    item 10
  </div>
  <div class="pf-l-grid__item">
    item 11
  </div>
  <div class="pf-l-grid__item">
    item 12
  </div>
  <div class="pf-l-grid__item">
    item 13
  </div>
  <div class="pf-l-grid__item">
    item 14
  </div>
</div>

Base grid

Preview

12 col
11 col
1 col
10 col
2 col
9 col
3 col
8 col
4 col
7 col
5 col
<div class="pf-l-grid">
  <div class="pf-l-grid__item pf-m-12-col">
    12 col
  </div>
  <div class="pf-l-grid__item pf-m-11-col">
    11 col
  </div>
  <div class="pf-l-grid__item pf-m-1-col">
    1 col
  </div>
  <div class="pf-l-grid__item pf-m-10-col">
    10 col
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
  <div class="pf-l-grid__item pf-m-9-col">
    9 col
  </div>
  <div class="pf-l-grid__item pf-m-3-col">
    3 col
  </div>
  <div class="pf-l-grid__item pf-m-8-col">
    8 col
  </div>
  <div class="pf-l-grid__item pf-m-4-col">
    4 col
  </div>
  <div class="pf-l-grid__item pf-m-7-col">
    7 col
  </div>
  <div class="pf-l-grid__item pf-m-5-col">
    5 col
  </div>
</div>

Grid gutter

Preview

12 col
11 col
1 col
10 col
2 col
9 col
3 col
<div class="pf-l-grid pf-m-gutter">
  <div class="pf-l-grid__item pf-m-12-col">
    12 col
  </div>
  <div class="pf-l-grid__item pf-m-11-col">
    11 col
  </div>
  <div class="pf-l-grid__item pf-m-1-col">
    1 col
  </div>
  <div class="pf-l-grid__item pf-m-10-col">
    10 col
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
  <div class="pf-l-grid__item pf-m-9-col">
    9 col
  </div>
  <div class="pf-l-grid__item pf-m-3-col">
    3 col
  </div>
</div>

Responsive grid

Preview

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
<div class="pf-l-grid">
  <div class="pf-l-grid__item pf-m-1-col pf-m-6-col-on-md pf-m-11-col-on-xl">
    1 / 6 / 11 col
  </div>
  <div class="pf-l-grid__item pf-m-11-col pf-m-6-col-on-md pf-m-1-col-on-xl">
    11 / 6 / 1 col
  </div>
  <div class="pf-l-grid__item pf-m-2-col pf-m-6-col-on-md pf-m-10-col-on-xl">
    2 / 6 / 10 col
  </div>
  <div class="pf-l-grid__item pf-m-10-col pf-m-6-col-on-md pf-m-2-col-on-xl">
    10 / 6 / 2 col
  </div>
  <div class="pf-l-grid__item pf-m-3-col pf-m-6-col-on-md pf-m-9-col-on-xl">
    3 / 6 / 9 col
  </div>
  <div class="pf-l-grid__item pf-m-9-col pf-m-6-col-on-md pf-m-3-col-on-xl">
    9 / 6 / 3 col
  </div>
  <div class="pf-l-grid__item pf-m-4-col pf-m-6-col-on-md pf-m-8-col-on-xl">
    4 / 6 / 8 col
  </div>
  <div class="pf-l-grid__item pf-m-8-col pf-m-6-col-on-md pf-m-4-col-on-xl">
    8 / 6 / 4 col
  </div>
  <div class="pf-l-grid__item pf-m-5-col pf-m-6-col-on-md pf-m-7-col-on-xl">
    5 / 6 / 7 col
  </div>
  <div class="pf-l-grid__item pf-m-7-col pf-m-6-col-on-md pf-m-5-col-on-xl">
    7 / 6 / 5 col
  </div>
</div>

Nested grids

Preview

12 col
10 col
6 col
6 col
4 col
8 col
2 col
<div class="pf-l-grid">
  <div class="pf-l-grid__item pf-m-12-col">
    12 col
  </div>
  <div class="pf-l-grid__item pf-m-10-col">
    10 col
    <div class="pf-l-grid pf-m-gutter">
      <div class="pf-l-grid__item pf-m-6-col">
        6 col
      </div>
      <div class="pf-l-grid__item pf-m-6-col">
        6 col
      </div>
      <div class="pf-l-grid__item pf-m-4-col">
        4 col
      </div>
      <div class="pf-l-grid__item pf-m-8-col">
        8 col
      </div>
    </div>
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
</div>

Offsets

Preview

11 col, offset 1
10 col, offset 2
9 col, offset 3
8 col, offset 4
<div class="pf-l-grid pf-m-gutter">
  <div class="pf-l-grid__item pf-m-11-col pf-m-offset-1-col">
    11 col, offset 1
  </div>
  <div class="pf-l-grid__item pf-m-10-col pf-m-offset-2-col">
    10 col, offset 2
  </div>
  <div class="pf-l-grid__item pf-m-9-col pf-m-offset-3-col">
    9 col, offset 3
  </div>
  <div class="pf-l-grid__item pf-m-8-col pf-m-offset-4-col">
    8 col, offset 4
  </div>
</div>

Row spans

Preview

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
<div class="pf-l-grid pf-m-gutter">
  <div class="pf-l-grid__item pf-m-8-col">
    8 col
  </div>
  <div class="pf-l-grid__item pf-m-4-col pf-m-2-row">
    4 col, 2 row
  </div>
  <div class="pf-l-grid__item pf-m-2-col pf-m-3-row">
    2 col, 3 row
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
  <div class="pf-l-grid__item pf-m-4-col">
    4 col
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
  <div class="pf-l-grid__item pf-m-4-col">
    4 col
  </div>
  <div class="pf-l-grid__item pf-m-2-col">
    2 col
  </div>
  <div class="pf-l-grid__item pf-m-4-col">
    4 col
  </div>
  <div class="pf-l-grid__item pf-m-4-col">
    4 col
  </div>
</div>

Documentation

Overview

A Grid layout framework including responsive columns, row spans and gutters. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. Example .pf-m-6-col-on-lg

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 grid gutters.
.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.