Layouts

Create responsive page layouts using the Camden and GOV.UK grid.

Structure page content and interface elements so they are easy to scan and use.

Screen size

Most people use our websites on mobile devices, so start with a single-column layout and design upwards. Do not assume which device someone is using; design for a range of screen sizes.

The default maximum page width is 1200px. Make it wider only when the content genuinely needs it.

Responsive breakpoints

• mobile: 320px
• mobile large: 576px
• tablet: 641px
• desktop: 768px
• large desktop: 992px

Common layouts

Use a two-thirds content column, with an optional one-third column for supporting content. This keeps lines to a readable length of about 75 characters or fewer.

Full width

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

Two-thirds and one-third

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

Nested grids

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

Width and display overrides

Use govuk-!-width- classes when an element needs a width independent of the grid. Use govuk-!-display-block, govuk-!-display-inline, govuk-!-display-inline-block or govuk-!-display-none when you need to override how an element displays.

Use govuk-visually-hidden to keep content available to screen readers while hiding it visually. Use govuk-visually-hidden-focusable for content that should appear when it receives keyboard focus.