Styles

Layout

Screen size

Design for small screens first using a single-column layout.

Don’t make assumptions about what devices people are using. Design for different screen sizes rather than specific devices.

The default maximum page width is 1020px, but you can make it wider if your content requires it.

Common layouts

Two-thirds

<div class="govuk-width-container">
  <a href="#" class="govuk-back-link">Back</a>

  <main class="govuk-main-wrapper">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">Two-thirds column</h1>
        <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
      </div>
    </div>

  </main>
</div>

Two-thirds / One-third

<div class="govuk-width-container">
  <a href="#" class="govuk-back-link">Back</a>

  <main class="govuk-main-wrapper">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">Two-thirds column</h1>
        <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
      </div>

      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One-third column</h3>
        <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
      </div>
    </div>

  </main>
</div>

Row 1: Two-thirds
Row 2: Two-thirds / One-third

<div class="govuk-width-container">
  <a href="#" class="govuk-back-link">Back</a>

  <main class="govuk-main-wrapper">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">Two-thirds column</h1>
      </div>
    </div>

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h2 class="govuk-heading-l">Two-thirds column</h2>
        <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
        <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
      </div>

      <div class="govuk-grid-column-one-third">
        <h3 class="govuk-heading-m">One-third column</h3>
        <p class="govuk-body">This is a paragraph inside a one-third wide column</p>

      </div>
    </div>

  </main>
</div>

Building your own layout

If you want to build your layout from scratch, or understand what each of the parts are responsible for, here’s an explanation of how the page wrappers and grid system works.

Page wrappers

Limiting width of content

To set up your layout you will need to create 2 wrappers. The first should have the class govuk-width-container, which sets the maximum width of the content but doesn’t add any vertical margin or padding.

If your design requires them, you should place components such as breadcrumbs, back link and phase banner inside this wrapper so that they sit directly underneath the header.

Add vertical space

Within govuk-width-container you should add the govuk-main-wrapper class to your <main> element. This adds responsive padding to the top and bottom of the page and will be the container for your main content.

Exploded view of page wrappers

<div class="govuk-width-container">
  <a href="#" class="govuk-back-link">Back</a>

  <main class="govuk-main-wrapper">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">Page title</h1>
      </div>
    </div>

  </main>
</div>

If you’re not using the breadcrumbs, back link or phase banner components in your design, use a modifier class govuk-main-wrapper--l to increase the vertical space above the content.

<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l">

    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">Page title</h1>
      </div>
    </div>

  </main>
</div>

Grid system

Use the grid system to lay out the content on your service’s pages.

Most GOV.UK pages follow a two-thirds to one-third layout but the grid system allows for a number of additional combinations when necessary.

Your main content should always be in a two-thirds column even if you’re not using a corresponding one-third column for secondary content.

Understanding the grid system

The grid is structured with a govuk-grid-row wrapper which acts as a row to contain your grid columns.

You can add columns inside this wrapper to create your layout. To define your columns add the class beginning with govuk-grid-column- to a new container followed by the width “modifier”, for example govuk-grid-column-one-third to apply your desired width.

The available widths are:

Full width

<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <p>govuk-grid-column-full</p>
  </div>
</div>

One-half

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-half">
    <p>govuk-grid-column-one-half</p>
  </div>
</div>
<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <p>govuk-grid-column-one-third</p>
  </div>
</div>

Two-thirds

<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <p>govuk-grid-column-two-thirds</p>
  </div>
</div>

One-quarter

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-quarter">
    <p>govuk-grid-column-one-quarter</p>
  </div>
</div>

Example combinations

<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <p>govuk-grid-column-full</p>
  </div>
</div>

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-half">
    <p>govuk-grid-column-one-half</p>
  </div>
  <div class="govuk-grid-column-one-half">
    <p>govuk-grid-column-one-half</p>
  </div>
</div>

<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <p>govuk-grid-column-two-thirds</p>
  </div>
  <div class="govuk-grid-column-one-third">
    <p>govuk-grid-column-one-third</p>
  </div>
</div>

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <p>govuk-grid-column-one-third</p>
  </div>
  <div class="govuk-grid-column-two-thirds">
    <p>govuk-grid-column-two-thirds</p>
  </div>
</div>

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-quarter">
    <p>govuk-grid-column-one-quarter</p>
  </div>
  <div class="govuk-grid-column-one-quarter">
    <p>govuk-grid-column-one-quarter</p>
  </div>
  <div class="govuk-grid-column-one-quarter">
    <p>govuk-grid-column-one-quarter</p>
  </div>
  <div class="govuk-grid-column-one-quarter">
    <p>govuk-grid-column-one-quarter</p>
  </div>
</div>

Nested grids

<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <p>govuk-grid-column-two-thirds</p>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-one-half">
        <p>govuk-grid-column-one-half</p>
      </div>
      <div class="govuk-grid-column-one-half">
        <p>govuk-grid-column-one-half</p>
      </div>
    </div>
  </div>
</div>

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk