4 grid Grid

This set of mixins should be used when building layouts. No grid classes are included, as mixins are preferred.

This grid is designed to use four columns on the small breakpoint, six on medium, eight on large and 10 on extra large. In order to make it clear what the math is doing, the mixins and functions provided require the author to explicitly define the maximum number of columns each time they are used. The following example shows what one column cell would look like in each of the breakpoints. This is the CSS for the first example below.

The col() mixin defined first applies proper margins for the grid items, as well as the correct width. Then when media queries are applied, the col-width function provides the math to be used for the width value.

.grid-1-example {
  @include c.col(1, 4);

  @media #{p.$mq-sm} {
    width: c.col-width(1, 6);
  }

  @media #{p.$mq-lg} {
    width: c.col-width(1, 8);
  }

  @media #{p.$mq-xl} {
    width: c.col-width(1, 10);
  }
}