Simple Grid

If all you need is a grid with the same amount of columns.

Default grid

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

Two column grid

Use grid--cols-2 for a two column grid.

Three column grid

Use grid--cols-3 for a three column grid.

Four column grid

Use grid--cols-4 for a four column grid.

Spanning columns

If you have fewer items than the total number of columns, they can be expanded to fill the remaining space.

Use grid__col-[2,3,4] to set an item to expand into the available space.

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.

Breakpoints

Set the amount of grid columns to use per breakpoint by using the following class format: grid--cols-[xs,sm,md,lg]-[4,3,2]

They correlate to:

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

Example

Use grid--cols-md-3 to:

• Show a one column grid until the md breakpoint is reached
• Show a three column grid when the md breakpoint is reached

Another example

Use grid--cols-sm-2 and grid--cols-lg-3 to:

• 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

No column gap

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

Advanced Grid

If you are looking for more advanced customisation view our Grid