Layout CSS

Content wrappers

Two generic class names exist for wrapping content.

wrap

Add a class name of wrap to create a fixed width element with a width of 940px centered on the page.

fluid-wrap

Add a class name of fluid-wrap to create a fluid width element with a maximum width of 940px centered on the page.

940px fixed width grid

This is the 940px fixed width grid as seen on www.guardian.co.uk. It is made up of 12 60 pixel wide columns with 20 pixel gutters, and can be split into any configuration, as demonstrated below.

1
1
1
1
1
1
1
1
1
1
1
1
3
3
3
3
4
4
4
8
4
6
6

This is created by the use of two class values, row and col-[n]. Here's the code that implements the final two rows of the above layouts.

<div class="row">
    <div class="col-8">8</div>
    <div class="col-4">4</div>
</div>
<div class="row">
    <div class="col-6">6</div>
    <div class="col-6">6</div>
</div>
            

Fluid width grid

The fluid grid is implemented in percentages so that the widths of the columns scale along with the width of the users browser. Combined with media queries and flexible width images this can be used to implement a responsive design, which assumes less about your users browsing environment.

1
1
1
1
1
1
1
1
1
1
1
1
3
3
3
3
4
4
4
8
4
6
6

This is created by the use of two class values, fluid-row and col-[n]. Here's the code that implements the final two rows of the above layouts.

<div class="fluid-row">
    <div class="col-8">8</div>
    <div class="col-4">4</div>
</div>
<div class="fluid-row">
    <div class="col-6">6</div>
    <div class="col-6">6</div>
</div>