Layout system



Layouts can be created using a grid structure, made from columns, whilst allowing Flexbox to take care of alignment. A grid can be constructed in many ways by using the .col() mixin and then passing in parameters as needed.

Required arguments

The only required argument is numerical. The value is used to calculate the number of columns out of the total passed to the $cols variable.

The number of grid columns the column must span.
// Set max columns to 12 in variables.less
$cols: 12
// 1 x 100% width column
.default-example {
  @include col(12);
Optional arguments

To omit one of the following default arguments, pass a false value to the argument when calling the mixin.

Subtracts the $grid-gutter from the column width using CSS calc().
Aligns grid content with non-grid content using a negative margin. Otherwise centers the column.
// A column with no calc()
.no-calc-example {
  @include col(6, $calc: false);
// A column with no $margin
.no-margin-example {
  @include col(6, $margin: false);