A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more easily, using a responsive, scrollable column structure.
The grid system we use is heavily based on bootstrap. After reviewing many Australian government web-properties it was clear that the grids from bootstrap are commonly used for responsive layouts and that our users are likely to already be familiar with using it.
Why does the au-grid class exist?
.au-grid class is added for specificity. If a developer or designer is using another grid system which uses the same classes or has an element with the class of
.container it means they do not inherit those styles. This was a fundamental decision we made when creating this design system as we didn't want styles to leak onto elements unintentionally.