dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Grid 12

v2.1.0

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.

Released

History
View changes
Install
npm i @gov.au/grid-12
Tags
Requires
Contributors
  • Dominik Wilkowski avatar picture
  • Julian Fleetwood avatar picture
  • Simon Pascal Klein avatar picture

Grid selection

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.

Note: we are not using the latest grid from bootstrap because it uses flexbox, which is not fully adopted by the browsers we support.

Why does the au-grid class exist?

The .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.