govuk-!-display-none to remove the element from the page.

govuk-!-display-inline-block to display as an inline block.

govuk-!-display-inline to display inline.

govuk-!-display-block to display as a block.

You can use display override classes if you need to override how elements display on the page. For example govuk-grid-column-two-thirds-from-desktop will set your column width to be two-thirds width at the desktop breakpoint only. To specify a width at the desktop breakpoint you can use the desktop specific grid classes. govuk-grid-column-full govuk-grid-column-one-half govuk-grid-column-one-half govuk-grid-column-two-thirds govuk-grid-column-one-third govuk-grid-column-one-third govuk-grid-column-two-thirds govuk-grid-column-three-quarters govuk-grid-column-one-quarter govuk-grid-column-one-quarter govuk-grid-column-three-quarters Desktop specific grid classes To define your columns add the class beginning with govuk-grid-column- to a new container followed by the width, for example govuk-grid-column-one-third to apply your desired width. You can add columns inside this wrapper to create your layout. The grid is structured with a govuk-grid-row wrapper which acts as a row to contain your grid columns.

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. Most GOV.UK pages follow a ‘two-thirds and one-third’ layout, but the grid system allows for a number of additional combinations when necessary. Use the grid system to lay out the content on your service’s pages. the govuk-main-wrapper-l class - if govuk-main-wrapper-auto-spacing does not work for your service.the govuk-main-wrapper-auto-spacing class.If you’re not using the breadcrumbs, back link or phase banner components in your design, add the correct amount of vertical padding above the content by adding one of the following to your element: CSS layouts are difficult and expensive to animate. This adds responsive padding to the top and bottom of the page and will be the container for your main content. Create layout and shared layout animations with React and Framer Motion. Within govuk-width-container you should add the govuk-main-wrapper class to your element. 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. The first should have the class govuk-width-container, which sets the maximum width of the content but does not add any vertical margin or padding. To set up your layout you will need to create 2 wrappers. 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. Back Two-thirds column Two-thirds column This is a lead paragraph inside a two-thirds wide column This is a paragraph inside a two-thirds wide column One-third column This is a paragraph inside a one-third wide column Building your own layout There is a problem with the service pages Replace variables, functions and mixins from our old frameworksĮxtending and modifying components in production

Layout