Examples of grid classes using full layout
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
w-narrow
w-narrow
w-narrow
w-doublenarrow
w-doublenarrow
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)
w-narrow (full at 480)
w-narrow (full at 480)
box20 with w-doublenarrow inside.
Possibly the same graduate
Box20 makes me want to dance!
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.
onethird
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 »
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
onethird
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.
2/3 left
A student
Another student
Some books
1/3 right
1/3 div, with a box in it. Normal box, not box20, so it has different padding.
ANU Recruit
RMS1/3 grid classes...
Set to half at 600px
1/3 grid classes...
This one goes full at 600px
