Grid Framework Examples

This page provides some examples of how to implement the grid. Detailed documentation is available on another page.

View Detailed Grid Documentation

Grid Framework

Mobile-First Layouts

In its simplest form, the v3 Grid implementation will retain a complete fluid column set from mobile all the way to the widest screen.

wdn-col-full
wdn-col-one-half
wdn-col-one-half
wdn-col-one-third
wdn-col-two-thirds
wdn-col-one-fourth
wdn-col-three-fourths
wdn-col-one-fifth
wdn-col-four-fifths
wdn-col-one-sixth
wdn-col-five-sixths
wdn-col-one-seventh
wdn-col-six-sevenths
wdn-col-one-eighth
wdn-col-seven-eighths
wdn-col-one-ninth
wdn-col-eight-ninths

Breakpoint Layout Control

In many cases, shrunk-down columns present content incorrectly on smaller screens. So, you can make every column full-width on smaller screens and introduce your layout at wider views.

View documentation on breakpoints

An Example at Breakpoint 480px (formerly bp1)

bp480-wdn-col-full
bp480-wdn-col-one-half
bp480-wdn-col-one-half
bp480-wdn-col-one-third
bp480-wdn-col-two-thirds
bp480-wdn-col-one-fourth
bp480-wdn-col-three-fourths
bp480-wdn-col-two-fifths
bp480-wdn-col-three-fifths
bp480-wdn-col-one-sixth
bp480-wdn-col-five-sixths
bp480-wdn-col-three-sevenths
bp480-wdn-col-four-sevenths
bp480-wdn-col-three-eighths
bp480-wdn-col-five-eighths
bp480-wdn-col-four-ninths
bp480-wdn-col-five-ninths

An Example at Breakpoint 768 (formerly bp2)

bp768-wdn-col-full
bp768-wdn-col-one-half
bp768-wdn-col-one-half
bp768-wdn-col-one-third
bp768-wdn-col-two-thirds
bp768-wdn-col-one-fourth
bp768-wdn-col-three-fourths
bp768-wdn-col-two-fifths
bp768-wdn-col-three-fifths
bp768-wdn-col-one-sixth
bp768-wdn-col-five-sixths
bp768-wdn-col-three-sevenths
bp768-wdn-col-four-sevenths
bp768-wdn-col-three-eighths
bp768-wdn-col-five-eighths
bp768-wdn-col-four-ninths
bp768-wdn-col-five-ninths

Centered Layouts

Whitespace is an important part of legibility and design. Sometimes it helps to center your content.

wdn-col-one-half centered
wdn-col-one-third centered
wdn-col-one-fourth centered

Short Cuts

If your wdn-grid-setis built with columns of proportionate widths, then you can use a grid set definition. Then each column simply needs a simple wdn-colclass.

wdn-grid-set-halves

wdn-col
wdn-col

wdn-grid-set-thirds

wdn-col
wdn-col
wdn-col

wdn-grid-set-fourths

wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-fifths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-sixths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-sevenths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-eighths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

wdn-grid-set-ninths

wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col
wdn-col

These work at each of the breakpoints as well. bp480-wdn-grid-set-halveswill provide full-width columns below breakpoint 480, but then side-by-side half columns at breakpoint 480 and above.

wdn-col
wdn-col

Unlimited Nesting

Want your grid in your grid? No problem, nest as often as you'd like (this page is).

wdn-col-one-half
wdn-col-one-half
wdn-col-one-half
wdn-col-one-half
wdn-col-two-thirds
wdn-col-one-third
wdn-col-three-fourths
wdn-col-one-half
wdn-col-one-half
wdn-col-one-fourth
wdn-col-two-thirds centered

Visual Columns

The grid elements are built for structural layouts only, and presentation shouldn't be introduced to these classes (let's keep the sanity!).

However, it is often necessary to create a visual presentation inside a column (think backgrounds and borders). Therefore, add a new element with a class of .visual-islandinside your column.

Here's an example of a background without the crowded content. Wow, this looks nice!

visual-island

Here's an example of a background without the crowded content. Wow, this looks nice!

visual-island
dummy placeholder image visual-island
dummy placeholder image visual-island
dummy placeholder image visual-island