Grids

The Component System grid is based off a 12 column grid, which divides into 1-col, 2-col, 3-col, 4-col, 5-col and 6-col layouts. These grid layouts are used throughout many of the components in the system (Page Links, USPs etc.)

Each column layout has different styles on different break points. Resize to view or edit these styles.

To change the gutter size, update the horizontal padding and bottom margin on each of the column classes (.1-col through to .6-col). In addition to this, update the negative bottom margin on the parent .c-flex-container to reflect the updates.

Implementation tip
If changing the Grid styles from the default settings, remember to edit the column and row gutters in .2-col-text-grid at the bottom of the page. This will maintain gutter consistency throughout grid and text layouts.

Flex grid

1 column

c-flex-wrapper

1-col

div

1-col on all device widths.

2 columns

c-flex-wrapper

2-col

div

Stacks to 1-col on mobile landscape.

3 columns

c-flex-wrapper

3-col

div

Stacks to 1-col on mobile landscape.

4 columns

c-flex-wrapper

4-col

div

Stacks to 2 columns on tablet, and 1 column on mobile portrait.

5 columns

c-flex-wrapper

5-col

div

Stacks to 3 columns on tablet, 3 columns on mobile landscape and 2 columns on mobile portrait.

6 columns

c-flex-wrapper

6-col

div

stacks to 4 columns on tablet, 3 columns on mobile landscape and 2 columns on mobile portrait

1-6 columns, gutterless

is--gutterless

Applies to any column class to remove gutters horizontal and vertical. Must also be applied to parent flex wrapper.

Text grid

Text components use CSS Grid, which is separate from the flex grid. By default it has 20px gutters. To change these gutters, select the grid element below, click "Edit grid" and update the column and row gutter values.

2 column grid

c-2-col-text-grid


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

2 column grid gutterless

c-2-col-text-grid

is--gutterless


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.