Objects: grid

Grid

.au-o-grid: Main grid container
.au-o-grid__item: Grid item (default is full width)

Single grid item

Combined with width utilities

.au-u-1-2: Available widths are defined with fractions (defined in _s-global.scss)

Half width grid item (.au-u-1-2)

Responsive

.au-u-1-2@medium: Add breakpoints to create a responsive grid (defined in _s-global.scss)

Responsive width grid item (.au-u-1-2@small .au-u-1-3@medium)

Gutter modifier

.au-o-grid--flush: no gutter

First grid item

Second grid item

.au-o-grid--tiny: tiny gutter

First grid item

Second grid item

.au-o-grid--small: small gutter

First grid item

Second grid item

.au-o-grid--large: large gutter

First grid item

Second grid item

Fill and aligment modifiers

.au-o-grid--middle: Align all grid items to the middles of each other.
.au-o-grid--bottom: Align all grid items to the bottoms of each other.
.au-o-grid--center: Fill up the grid system from the centre.
.au-o-grid--right: Fill up the grid system from the right-hand side.
.au-o-grid--reverse: Reverse the rendered order of the grid system.
.au-o-grid--stretch: Stretch the grid in the available space.
.au-o-grid--fixed: Fix the grid in the available space (height and width).