Examples of grid classes using full layout

This is a box20, inside a full.

This sample page contains things such as: box20, anu-col-m, anu-col-l, anu-col-r, 1/3, 2/3, full, w-one-third, w-two-third, full-at-600, half-at-600, full-at-480.

This is a box20, inside a full

w1/3

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor.

w1/3

w1/3

w2/3

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor.

w1/3

w-narrow

An image

w-narrow

An image

w-narrow

An image

w-narrow

An image

w-doublenarrow

An image

w-doublenarrow

An image

Using full-at-600 and half-at-600

This is a box20 inside a full.

w1/3 (full at 600)

full-at-600 and half-at-600 can be used to change the default sizes at the 600px breakpoint. This div will become full width at 600px, instead of 1/3.

w1/3 (half at 600)

w1/3 (half at 600)

This is a box20, inside a doublenarrow (half)

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor.

This is a box20, inside a doublenarrow (half)

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor.

  • Blah
  • Blah
  • Blah
  • Blah

box20, 4 w-narrows, full-at-600 & full-at-480, anu-col-l, anu-col-m, anu-col-r

The first narrow area will go to full width at 600px. Then all of the narrow areas will go to full width at 480px.

You can use anu-col-l, anu-col-m, and anu-col-r to mark the left, middle and right columns. This will do the left and right margins for you automatically.

w-narrow (full at 600)

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede.

w-narrow (full at 480)

An image

w-narrow (full at 480)

An image

w-narrow (full at 480)

An image

box20 with w-doublenarrow inside.

An image
29
Aug

It's Chicken Time again

9am–4pm
Vestibulum ultricies nonummy risus. Quisque eget diam...
An image
11
Aug

A Graduate

5.30–7pm
Vestibulum ultricies nonummy risus. Quisque eget diam...
An image
11
Aug

Possibly the same graduate

7–8.30pm
Vestibulum ultricies nonummy risus. Quisque eget diam....
Dots
12
Aug

Dots

5.30–7.30pm
Vestibulum ultricies nonummy risus. Quisque eget diam....
Subscribe to Experience ANU

Box20 makes me want to dance!

with a w-2/3 and a w-1/3 inside. Goes to full at 600px

twothird with clear

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.

A heading »

Vestibulum ultricies nonummy risus. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor.

twothird with w1/3, w2/3 inside

Vestibulum ultricies nonummy risus. Quisque eget diam.

This is a w-one-third

This is a w-two-third

Areas of excellence
Areas of excellence

DoubleNarrow

The image will change to full size on responsive, using hidden 2nd image...
Awards & achievements
Awards & achievements

DoubleNarrow

The image will change to full size on responsive, using hidden 2nd image...

2/3 left

A student

w1/3 image on the right. Other text flows... the w1/3 should be full size at 480px and below.

Another student

w1/3 image on the right. Other text flows... the w1/3 should be full size at 480px and below.
The Patji-Dawes award celebrates excellence in language teaching. Image: Ken Banks, Flickr.
06
Aug
2015

Some books

w1/3 image on the right. Other text in a datetext div... the w1/3 should be full size at 480px and below.