Grid

There are four grid types available which are shown below.

Default grid

• The default grid is one column
• You can have many elements nested inside the grid
• Excess elements wrap onto the next line

Column sizes

You can define the size of individual columns to create many different layouts. Each row should add up to 12 columns to ensure it aligns with the rest of the content on the page.

Single row

We have used a combination of grid__col-9 and grid__col-3.

Mutiple rows

We have used a combination of grid__col-4 and grid__col-6.

Breakpoints

Set the size of a column per breakpoint by using the following class format: grid__col-[xs,sm,md,lg]-[1-12]

They correlate to:

• xs - tablet portrait and up
• sm - tablet landscape and up
• md - laptop and up
• lg - desktop and up

Example

• Show a one column grid until the sm breakpoint is reached
• Show a two column grid when the sm breakpoint is reached
• Show a three column grid when the lg breakpoint is reached

Centering a grid

Use grid--center to center the grid when the total number of columns are less than 12.

Column order

Use grid--swap to switch the order of the columns on mobile devices.

Column alignment

By default all grid columns align to the top and stretch to the size of the largest column.

Use grid--cols-center to align all columns to the center.

Use grid--cols-end to align all columns to the bottom.

No column gap

Use grid--collapsed to remove the gap between columns.

Nested grid

You can nest grids inside other grids.

Simple grid

View our pre-defined Simple Grid layouts we have created for you.