GOV.UK elements Layout

Use white space to create a visual hierarchy on the page.

Contents:

Page width

The default maximum page width is 1020px, but go wider if the content requires it.

Use a grid to lay out your content. To prevent long lines of text, content should sit in a column which is two-thirds of the page width.

Long lines reduce legibility, so all lines of text should be no longer than 70 to 80 characters.

Screen size

Design for small screens first using a single column layout.

Optimise for different screen sizes, but don’t make assumptions about what devices people are using.

Spacing

15px gutter example
30px gutter example

Grid unit proportions

Full width

Content


  <div class="grid-row">

  <div class="column-full">
    <p>Content</p>
  </div>

</div>


Halves

Content

Content


  <div class="grid-row">

  <div class="column-one-half">
    <p>Content</p>
  </div>

  <div class="column-one-half">
    <p>Content</p>
  </div>

</div>


Thirds

Content

Content

Content


  <div class="grid-row">

  <div class="column-one-third">
    <p>Content</p>
  </div>

  <div class="column-one-third">
    <p>Content</p>
  </div>

  <div class="column-one-third">
    <p>Content</p>
  </div>

</div>


Two thirds / One third

Content

Content


  <div class="grid-row">

  <div class="column-two-thirds">
    <p>Content</p>
  </div>

  <div class="column-one-third">
    <p>Content</p>
  </div>

</div>


One third / Two thirds

Content

Content


  <div class="grid-row">

  <div class="column-one-third">
    <p>Content</p>
  </div>

  <div class="column-two-thirds">
    <p>Content</p>
  </div>

</div>


Quarters

Content

Content

Content

Content


  <div class="grid-row">

  <div class="column-one-quarter">
    <p>Content</p>
  </div>

  <div class="column-one-quarter">
    <p>Content</p>
  </div>

  <div class="column-one-quarter">
    <p>Content</p>
  </div>

  <div class="column-one-quarter">
    <p>Content</p>
  </div>

</div>


Examples