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.

Four column grid

Use grid--cols-4 to set a four column grid. Excess elements wrap onto the next line.

Three column grid

Use grid--cols-3 to set a three column grid. Excess elements wrap onto the next line.

Two column grid

Use grid--cols-2 to set a two column grid. Excess elements wrap onto the next line.

Grid 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

Filling columns

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

Fill first Item

Use grid--fill-first to set the first item to expand into the available space.

Fill last Item

Use grid--fill-last to set the last item to expand into the available space.

Column order

Use grid--swap to switch the order of the columns.

• On mobile the lighter column shows before the darker column
• On tablet and up the darker column shows before the lighter column

No Gap

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