@govuk-react/layout

Import

import Layout from '@govuk-react/layout';

THIS COMPONENT IS NO LONGER REQUIRED TO ACHIEVE LAYOUT;

1. GridCol contains the required gutters, we do not need to provide additional gutter

to build an accurate grid layout.

1. GridRow contains the required display: flex; and associated properties for GridCol.

1. Main contains the required properties to center a container that matches up with TopNav

and house the remaining body of content for the page.
If you feel you may still need a Layout component, please do raise a ticket on Github

Usage

This component provides default padding. You can use this component to wrap Grid components however it is not required.
Simple usage

import GridRow from '@govuk-react/grid-row';
import GridCol from '@govuk-react/grid-col';

<Layout>
  <GridRow>
    <GridCol>
      ...
    </GridCol>
  </GridRow>
</Layout>

References:

• https://github.com/alphagov/govukfrontendtoolkit/blob/master/stylesheets/gridlayout.scss
• https://github.com/alphagov/govukelements/blob/master/assets/sass/elements/layout.scss

Properties

Prop | Required | Default | Type | Description :--- | :------- | :------ | :--- | :---------- children | true | `````` | node | GridRow and GridCol children nodes