Responsive Grid
Base grid
12 col
11 col
1 col
10 col
2 col
9 col
3 col
8 col
4 col
7 col
5 col
6 col
6 col
<section 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 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>
</section>Base grid with gutters
12 col
11 col
1 col
10 col
2 col
9 col
3 col
8 col
4 col
7 col
5 col
6 col
6 col
<section 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 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 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>
</section>Smart grid
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>Row span
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>