Groundwork Test: Grids

This page generates grid elements using classes and extends. Things are good when:

Elements appear as they should regardless of whether classes or extends are used.
All grid elements behave responsively.

Standard Grid

one third class

one third extend

Small-Tablet Grid

one third small-tablet class

one third small-tablet extend

Mobile Grid

one third mobile class

one third mobile extend

Grid Adapters

one fourth two-up-small-tablet class

one fourth two-up-small-tablet extend

one fourth small-tablet two-up-mobile class

one fourth small-tablet two-up-mobile extend

Re-ordering

First (class)

Second (class)

First (right-two class)

Second (left-three class)

First (extend)

Second (extend)

First (right-two extend)

Second (left-three extend)

Centering

One third centered class

One third centered extend

Offsetting

One fifths class

Two fifths skip-two class

One fifths extend

Two fifths skip-two extend

Mobile Grid

One fifths small-tablet class

One fifths right-one small-tablet class

One fifths skip-two small-tablet class

One fifths mobile class

One fifths right-one mobile class

One fifths skip-two mobile class

One fifths small-tablet extend

One fifths right-one small-tablet extend

One fifths skip-two small-tablet extend

One fifths mobile extend

One fifths right-one mobile extend

One fifths skip-two mobile extend

Equal Height Columns