Grids

You can combine display, float, padding, and widths to construct a wide variety of grids. Here is a basic example of some options for constructing a simple grid.

Examples

Fixed Columns

fl w-100 pa2
fl w-90 pa2
fl w-10 pa2
fl w-80 pa2
fl w-20 pa2
fl w-75 pa2
fl w-25 pa2
fl w-70 pa2
fl w-30 pa2
fl w-60 pa2
fl w-40 pa2
fl w-50 pa2
fl w-50 pa2
fl w-third pa2
fl w-third pa2
fl w-third pa2
fl w-third pa2
fl w-two-thirds pa2
fl w-25 pa2
fl w-25 pa2
fl w-25 pa2
fl w-25 pa2
fl w-20 pa2
fl w-20 pa2
fl w-20 pa2
fl w-20 pa2
fl w-20 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2
fl w-10 pa2

Two Columns - Collapsing

<div class="mw9 center ph3-ns"> <div class="cf ph2-ns"> <div class="fl w-100 w-50-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-100 w-50-ns pa2"> <div class="outline bg-white pv4"></div> </div> </div> </div>

Three Columns - Collapse to Single

<div class="mw9 center ph3-ns"> <div class="cf ph2-ns"> <div class="fl w-100 w-third-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-100 w-third-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-100 w-third-ns pa2"> <div class="outline bg-white pv4"></div> </div> </div> </div>

Three Columns - Collapse to Mixed

<div class="mw9 center ph3-ns"> <div class="cf ph2-ns"> <div class="fl w-100 w-third-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-50 w-third-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-50 w-third-ns pa2"> <div class="outline bg-white pv4"></div> </div> </div> </div>

Four Columns - Collapse to single

<div class="mw9 center ph3-ns"> <div class="cf ph2-ns"> <div class="fl w-100 w-25-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-100 w-25-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-100 w-25-ns pa2"> <div class="outline bg-white pv4"></div> </div> <div class="fl w-100 w-25-ns pa2"> <div class="outline bg-white pv4"></div> </div> </div> </div>

Four Columns - Collapse to Mixed

<div class="mw9 center ph3-ns"> <div class="cf ph2-ns"> <div class="fl w-100 w-25-ns pa2"> <div class="outline bg-white tc pv4"></div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"></div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"></div> </div> <div class="fl w-third w-25-ns pa2"> <div class="outline bg-white tc pv4"></div> </div> </div> </div>