Standard CSS grid using a 12 column layout.

Default

No gutters or gaps present on default.

C
C
C
C
C
C
C
C
C
C
C
C

Gap

The gap modifier add gaps inbetween columns and rows in a grid. It is available as gap, gap-column, gap-row and gap-row-large and each is available in each breakpoint.

C
C
C
C
C
C
C
C
C
C
C
C
C
C

Gutter

The gutter modifier adds a gutter on the left and right of the grid.

C
C
C
C
C
C
C
C
C
C
C
C

Center

The center modifier centers a grid inside a parent element if the width of the parent element exceeds the specified max width. Center will conflict with gutter since both targets margin. If a gutter is needed create a parent grid with gutter.

C
C
C
C
C
C
C
C
C
C
C
C

Columns

The column elements make up the columns of the grid - allowing size and offset. Both size and offset support breakpoints.

C
C
C
C
C
C
C
C
C

Offset by setting start and end.

C

Column sizing and breakpoints.

C

Different order of elements based on viewport and auto flow dense.

C1
C2

Example

Header
Breadcrumb

Title

Banner

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7 - start at 7, end at 13 on medium and up
Link 1, first on small, last on medium
Link 2, last on small, first on medium

Title

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Title

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Title

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.