The structure of the grid is created with a class of grid on a container div.

The grid's direct descendant elements then automagically become its grid cells. Make these empty containing divs with no styling, as the gutters are added with padding.

For example:

<div class="grid  grid-4-cols">
  <div>
    <div class="box  box--padded  box--has-shadow">Column</div>
  </div>

  <div>
    <div class="box  box--padded  box--has-shadow ">Column</div>
  </div>

  <div>
    <div class="box  box--padded  box--has-shadow">Column</div>
  </div>

  <div>
    <div class="box  box--padded  box--has-shadow">Column</div>
  </div>
</div>

Automagic Columns

Most basic grids can be acheived simply by adding a class of grid-[n]-cols on the grid, the columns will then be 'automagically' generated up to a maximum of [n] columns as soon as is visibily suitable. Columns flow left to right, and return again at the end of the row.

eg.

• grid-2-cols Will create two columns when it's visibly sensible to do so
• grid-3-cols Will create three columns when it's visibly sensible to do so.
• grid-4-cols Will create two columns when the viewport is wide enough to do so, then four columns at wider viewports when it's visibly sensible to do so.
• grid-5-cols Will step through two columns when the viewport is wide enough to do so, then three columns, then five columns at wider viewports.
• grid-6-cols Will step through two columns when the viewport is wide enough to do so, then three, then four columns, then six columns at wider viewports.

For more complex control of choosing where columns are applied at breakpoints, see below (if applicable to project). For reference, 'automagic' breakpoints are defined in __vars/_breakpoints.scss

Spacing/Padding

Space items more or less by making them flush, compact, or spaced. eg.

grid grid--flush grid-4-cols

Column

Column

Column

Column

grid grid-compact grid-4-cols

Column

Column

Column

Column

grid grid-4-cols

Column

Column

Column

Column

grid grid-spaced grid-4-cols

Column

Column

Column

Column

Column Classes

Individual columns can be given classes that override the parent grid class.

Individual column classes can be used on all columns instead of a 'default' on the grid if required, the grid class on the container is still needed, and columns should still be direct descendant elements.

The fractions that will work depend on your project setup, generally speaking this will range from col-1/2 to col-5/6.

Always use the lowest common denominator in fractions. col-3/6 is not valid, use col-1/2.

These columns will still use 'automagic' breakpoints, ie. col-1/4 will be half-width where visibly suitable. For more complex control of choosing where columns are applied at breakpoints, see below (if applicable to project).

It's possible to use multiple col classes to change the widths of items at wider widths, bear in mind the higher denominator breakpoint takes priority the wider the viewport, and if mixing and matching, use fractions that work together, breaking up rows with additional grid wrappers to create new rows.

Complex/Advanced Usage: Custom Breakpoints

Depending on project setup, the grid may allow custom breakpoints (stages) to be appended to grid- and col- classes using the syntaxes:

• grid-[col]-cols@[stage]
• col-[x]/[col]@[stage]

The [col]s, and [stage]s for this usage must be initialised in Sass for the output classes to be compiled and available for use. This is not default behaviour as it can generate a hefty filesize depending on options chosen. See below for your project's support of this.

For example, if stages of s1, xxs, and phablet were defined, valid grid classes may be:

• grid-2-cols@s1
• grid-2-cols@xxs
• grid-4-cols@phablet

Valid column classes may be:

• col-1/2@s1
• col-2/5@xxs
• col-3/4@phablet

As with automagic breakpoints, col- classes take priority over any grid- classes, the higher denominator takes priority within the same breakpoint, and the later the breakpoint (the wider the viewport), the greater priority it would have.

This project, at delivery, has been enabled with the [stage]s:

  mobile: 20rem,
  mobile-wide: 35rem,
  tablet: 45rem,
  tablet-wide: 60rem,
  desktop: 80rem,
  desktop-wide: 90rem,

for [col]s:

2, 3, 4, 5, 6

So use in this project might include, for example:

• grid-2-cols@mobile
• grid-3-cols@tablet-wide
• grid-5-cols@desktop
• col-1/4@mobile
• col-1/2@tablet
• col-3/5@desktop-wide

(To add/edit/remove, see __vars/_breakpoints.scss & __vars/_grid.scss)