Components

Flexbox grid

Use our flexible grid to structure website content. The grid is mobile-first, powered by Flexbox, and based on a 12-column system. The grid includes gutters, column spanning, 4 breakpoints, and column alignment.

How it works

The grid system uses a series of containers, rows, and columns to lay out and align content.

The following layout (non-responsive) example creates three equal-width columns on tablet, desktop, and widescreen devices using our predefined grid classes. Those columns are centered in the page with the parent flex container.

3-column Flexbox grid

Containers

Flex container width can be fixed or fluid. The fixed container fills the available width until it reaches the maximum of 1366 pixels.

The fluid container has no constraints and fills all of the available space. This is ideal for display uses, such as widescreen HD display.

Rows

All columns must have a flex row as a parent.

Columns

Our 12-column grid has gutters, column spanning, four breakpoints, and column alignment.

The "md" in the above example refers to the breakpoint size. Here's the full range of breakpoint options:

  • xs = minimum width of 0 pixels
  • sm = minimum width of 768 pixels
  • md = minimum width of 1024 pixels
  • lg = minimum width of 1200 pixels

We also support offsets to allow flexibility of design, essentially allowing blank columns to assist aesthetics in layout.

The following example shows all the possible variants of column widths.

Flexgrid column variants

Why use a Flexbox grid?

We chose Flexbox because it's implemented by our supported browsers. We have labelled this grid type "Flex" so that we can add other grid types later. We're considering adding support for CSS Grid.

Credit

Original HTML and CSS derived from FlexboxGrid version 6.3.2. Licensed under the Apache Licence version 2.0.

Get in touch

If you’ve got a question, idea, or suggestion, email the Design System (DS) team at info@digital.govt.nz, use our AOG-DS Slack app, or discuss Flexbox grid on 'GitHub issues'.