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

A grid consists of a framework of cells laid out and aligned vertically and horizontally. A grid helps users read and visually navigate website content more easily, and uses a column structure that is both responsive and scrollable.

Released

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

Default

The grid is similar to the bootstrap grid system. This means you can access different breakpoints by changing the class name or by using the variables below. The breakpoints for each value are:

  • xs : $AU-media-xs : 576px
  • sm : $AU-media-sm : 768px
  • md : $AU-media-md : 992px
  • lg : $AU-media-lg : 1200px

These sizes can be overridden as necessary.

Example

<main class="au-grid">
  <div class="container">
    <div class="row">
      <div class="col-xs-1"><span>1</span></div>
      <div class="col-xs-2"><span>2</span></div>
      <div class="col-xs-2"><span>2</span></div>
      <div class="col-xs-3"><span>3</span></div>
      <div class="col-xs-4"><span>4</span></div>
    </div>

    <div class="row">
      <div class="col-xs-6"><span>6</span></div>
      <div class="col-xs-6"><span>6</span></div>
    </div>

    <div class="row">
      <div class="col-xs-12"><span>12</span></div>
    </div>
  </div>
</main>

Offset

You can offset a row by a specified number of columns by using the offset class name.

Example

<main class="au-grid">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">6</div>
      <div class="col-xs-offset-3 col-xs-3">3</div>
    </div>
  </div>
</main>

Fluid

Use container-fluid class for a full width container, spanning the entire width of your viewport.

Example

<main class="au-grid">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-4"><span>4</span></div>
      <div class="col-xs-4"><span>4</span></div>
      <div class="col-xs-4"><span>4</span></div>
    </div>
  </div>
</main>

Feedback