Example layouts using grid classes

The best way to lay out your content is using the standard grid classes: doublewide, doublenarrow, wide and narrow.

However, some content management systems have hard-coded the doublewide grid on each page. If that is the case with the system you are using, you should refer to example layouts using width classes.

Common combinations of grid classes are shown in the following sections:

Notes on the examples

  • The grey shading below indicates the bounds of the divs rather than boxes on the webpage (boxes would have more padding inside).
  • The layouts are responsive. Make your browser window narrower to see how columns change position and size.

1. Single doublewide

A doublewide div will take up the whole width of the content area.

<div class="doublewide">
  <p>Some content that takes up the full width of the screen.  Lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et</p>
</div>

Some content that takes up the full width of the screen. Lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

Floating content

Sometimes you might have a small piece of information or an image that you want the main body of text to wrap around. This works best if your text is in a doublewide, and you put the smaller amount of information inside a w-narrow div, as shown below. Note the use of 'left' and 'right' to float the w-narrow content to either side, and note that a right-floated w-narrow needs 'marginleft', while a left-floated w-narrow needs 'marginright'.

Floating a box

<div class="doublewide">
  <p>Some content that takes up the full width of the screen.  Lorem ipsum et lorem ipsum et  lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et
  </p>
   
  <div class="w-narrow right marginleft">
    <div class="box-solid">
      <p>I am some information in a box on the right</p>
    </div>
  </div>
</div>

I am some information in a box on the right

Some content that takes up the full width of the screen. Lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

Floating an image

<div class="doublewide">
  <p>Some content that takes up the full width of the screen.  There is an image on my left.  There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.</p>
   
  <div class="w-narrow left marginright">
    <img src="../images/features/graduate.jpg" alt="A graduate">
  </div>
</div>
A graduate

Some content that takes up the full width of the screen. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.

Some content that takes up the full width of the screen. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.

Some content that takes up the full width of the screen. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left. There is an image on my left.

2. Two wides

Use two wide divs when you want two columns of equal width. They have a margin included, so there is automatically whitespace between them.

<div class="wide">
  <p>Some content in a wide - the first one shows on the left.  Lorem ipsum et lorem ipsum et</p>
</div>

<div class="wide">
  <p>Some content in a second wide - the second one shows on the right.  Lorem ipsum et lorem ipsum et</p>
</div>

Some content in a wide - the first one shows on the left. Lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

Some content in a second wide - the second one shows on the right. Lorem ipsum et lorem ipsum lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et lorem ipsum et

3. Three narrows

Use three narrow divs when you want three columns of equal width. They have a margin included, so there is automatically whitespace between them.

Responsive tip

Note that as the screen width gets smaller (below 600px), the narrow divs get wider, pushing 'Narrow 3' to the next line. Below 480px, the narrow divs each take up the full screen width, one underneath the other. Resize your browser to see this effect in action.

<div class="narrow">
  <h2>Narrow 1</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>

<div class="narrow">
  <h2>Narrow 2</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>

<div class="narrow">
  <h2>Narrow 3</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>
   

4. A doublenarrow & a narrow

Use a doublenarrow div next to a narrow div when you want one small column beside the main content. Again, as they have margins included, so there is automatically whitespace between the columns.

Responsive tip

Note that as the screen width gets smaller (below 600px), the doublenarrow div drops to the next line as the two divs no longer fit next to each other. Below 480px, the divs each take up the full screen width, one underneath the other. Resize your browser to see this effect in action.

<div class="doublenarrow">
  <h2>Doublenarrow content on the left</h2>
  <p>Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>

<div class="narrow">
  <h2>Narrow content on the right</h2>
  <p>Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>
   

Doublenarrow content on the left

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.

Narrow content on the right

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.

Note that you don't have to have the doublenarrow first – you can just reverse the order of the divs to make the smaller column appear on the left.

Narrow content on the left

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.

Doublenarrow content on the right

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.

5. Combinations of the above

The four basic combinations shown above are often combined to create a page layout. For example, you might put some introductory content in a doublewide div at the top of the page, followed by three narrow divs below. You can just keep including any number of divs one after the other. There are a few things to keep in mind though:

  • Don't nest the grid class divs. For example, don't put a narrow div inside a wide div, or any other combination. The divs should be closed before starting a new one.
  • Check your layout combination on large and small screen sizes, to make sure the layout works on all sizes.

Here's an example of how you might combine some grid classes:

<div class="doublewide nopadbottom">
  <h1>My heading goes here</h1>
  <p>Some text at the top of the page, maybe an introduction...</p>
</div>
   
<div class="narrow nopadtop">
  <h2>Narrow 1</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>

<div class="narrow nopadtop">
  <h2>Narrow 2</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>
   
<div class="narrow nopadtop">
  <h2>Narrow 3</h2>
  <p class="nopadtop">Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede:</p>
</div>
   

My heading goes here

Some text at the top of the page, maybe an introduction...

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle