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

Open this example in a new window

Code

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

Open this example in a new window

Code

Mustache / Handlebars// Developer note: ensure your ".mustache" files are imported as plain text. In Webpack you might use https://github.com/webpack-contrib/raw-loader import Mustache from "mustache"; import FlexContainer from "@govtnz/ds/build/mustache/FlexContainer.mustache"; import FlexRow from "@govtnz/ds/build/mustache/FlexRow.mustache"; import FlexColumn from "@govtnz/ds/build/mustache/FlexColumn.mustache"; // The variables FlexContainer, FlexRow, FlexColumn are all strings that are mustache templates. export default `${Mustache.render(FlexContainer, { "width=fixed": true, width: true, children: `${Mustache.render(FlexRow, { children: `${Mustache.render(FlexColumn, { "xs=4": true, xs: true, sm: `4`, md: `4`, lg: `4`, children: `.g-flex-col .g-flex-col-md-4` })}${Mustache.render(FlexColumn, { "xs=4": true, xs: true, sm: `4`, md: `4`, lg: `4`, children: `.g-flex-col .g-flex-col-md-4` })}${Mustache.render(FlexColumn, { "xs=4": true, xs: true, sm: `4`, md: `4`, lg: `4`, children: `.g-flex-col .g-flex-col-md-4` })}${Mustache.render(FlexColumn, { "xs=6": true, xs: true, sm: `6`, md: `6`, lg: `6`, children: `.g-flex-col .g-flex-col-md-6` })}${Mustache.render(FlexColumn, { "xs=6": true, xs: true, sm: `6`, md: `6`, lg: `6`, children: `.g-flex-col .g-flex-col-md-6` })}${Mustache.render(FlexColumn, { "xs=12": true, xs: true, sm: `12`, md: `12`, lg: `12`, children: `.g-flex-col .g-flex-col-lg-12` })}${Mustache.render(FlexColumn, { "xs=1": true, xs: true, sm: `1`, md: `1`, lg: `1`, children: `1/12` })}${Mustache.render(FlexColumn, { "xs=11": true, xs: true, sm: `11`, md: `11`, lg: `11`, children: `11/12` })}${Mustache.render(FlexColumn, { "xs=2": true, xs: true, sm: `2`, md: `2`, lg: `2`, children: `2/12` })}${Mustache.render(FlexColumn, { "xs=10": true, xs: true, sm: `10`, md: `10`, lg: `10`, children: `10/12` })}${Mustache.render(FlexColumn, { "xs=3": true, xs: true, sm: `3`, md: `3`, lg: `3`, children: `3/12` })}${Mustache.render(FlexColumn, { "xs=9": true, xs: true, sm: `9`, md: `9`, lg: `9`, children: `9/12` })}${Mustache.render(FlexColumn, { "xs=4": true, xs: true, sm: `4`, md: `4`, lg: `4`, children: `4/12` })}${Mustache.render(FlexColumn, { "xs=8": true, xs: true, sm: `8`, md: `8`, lg: `8`, children: `8/12` })}${Mustache.render(FlexColumn, { "xs=5": true, xs: true, sm: `5`, md: `5`, lg: `5`, children: `5/12` })}${Mustache.render(FlexColumn, { "xs=7": true, xs: true, sm: `7`, md: `7`, lg: `7`, children: `7/12` })}${Mustache.render(FlexColumn, { "xs=6": true, xs: true, sm: `6`, md: `6`, lg: `6`, children: `6/12` })}${Mustache.render(FlexColumn, { "xs=6": true, xs: true, sm: `6`, md: `6`, lg: `6`, children: `6/12` })}${Mustache.render(FlexColumn, { "xs=7": true, xs: true, sm: `7`, md: `7`, lg: `7`, children: `7/12` })}${Mustache.render(FlexColumn, { "xs=5": true, xs: true, sm: `5`, md: `5`, lg: `5`, children: `5/12` })}${Mustache.render(FlexColumn, { "xs=8": true, xs: true, sm: `8`, md: `8`, lg: `8`, children: `8/12` })}${Mustache.render(FlexColumn, { "xs=4": true, xs: true, sm: `4`, md: `4`, lg: `4`, children: `4/12` })}${Mustache.render(FlexColumn, { "xs=9": true, xs: true, sm: `9`, md: `9`, lg: `9`, children: `9/12` })}${Mustache.render(FlexColumn, { "xs=3": true, xs: true, sm: `3`, md: `3`, lg: `3`, children: `3/12` })}${Mustache.render(FlexColumn, { "xs=10": true, xs: true, sm: `10`, md: `10`, lg: `10`, children: `10/12` })}${Mustache.render(FlexColumn, { "xs=2": true, xs: true, sm: `2`, md: `2`, lg: `2`, children: `2/12` })}${Mustache.render(FlexColumn, { "xs=11": true, xs: true, sm: `11`, md: `11`, lg: `11`, children: `11/12` })}${Mustache.render(FlexColumn, { "xs=1": true, xs: true, sm: `1`, md: `1`, lg: `1`, children: `1/12` })}` })}` })}`;

React (JavaScript)import React from "react"; import FlexContainer from "@govtnz/ds/build/react-js/FlexContainer"; import "@govtnz/ds/build/css/FlexContainer.css"; // or @govtnz/ds/build/scss/FlexContainer.scss import FlexRow from "@govtnz/ds/build/react-js/FlexRow"; import "@govtnz/ds/build/css/FlexRow.css"; // or @govtnz/ds/build/scss/FlexRow.scss import FlexColumn from "@govtnz/ds/build/react-js/FlexColumn"; import "@govtnz/ds/build/css/FlexColumn.css"; // or @govtnz/ds/build/scss/FlexColumn.scss export default () => ( <FlexContainer width="fixed"> <FlexRow> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="12" sm="12" md="12" lg="12"> .g-flex-col .g-flex-col-lg-12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> </FlexRow> </FlexContainer> );

React (TypeScript)import React from "react"; import FlexContainer from "@govtnz/ds/build/react-ts/FlexContainer"; import "@govtnz/ds/build/css/FlexContainer.css"; // or @govtnz/ds/build/scss/FlexContainer.scss import FlexRow from "@govtnz/ds/build/react-ts/FlexRow"; import "@govtnz/ds/build/css/FlexRow.css"; // or @govtnz/ds/build/scss/FlexRow.scss import FlexColumn from "@govtnz/ds/build/react-ts/FlexColumn"; import "@govtnz/ds/build/css/FlexColumn.css"; // or @govtnz/ds/build/scss/FlexColumn.scss export default () => ( <FlexContainer width="fixed"> <FlexRow> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="12" sm="12" md="12" lg="12"> .g-flex-col .g-flex-col-lg-12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> </FlexRow> </FlexContainer> );

React with Styled Components (JavaScript)import React from "react"; import FlexContainer from "@govtnz/ds/build/react-js-styled-components/FlexContainer"; import FlexRow from "@govtnz/ds/build/react-js-styled-components/FlexRow"; import FlexColumn from "@govtnz/ds/build/react-js-styled-components/FlexColumn"; export default () => ( <FlexContainer width="fixed"> <FlexRow> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="12" sm="12" md="12" lg="12"> .g-flex-col .g-flex-col-lg-12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> </FlexRow> </FlexContainer> );

React with Styled Components (TypeScript)import React from "react"; import FlexContainer from "@govtnz/ds/build/react-ts-styled-components/FlexContainer"; import FlexRow from "@govtnz/ds/build/react-ts-styled-components/FlexRow"; import FlexColumn from "@govtnz/ds/build/react-ts-styled-components/FlexColumn"; export default () => ( <FlexContainer width="fixed"> <FlexRow> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </FlexColumn> <FlexColumn xs="12" sm="12" md="12" lg="12"> .g-flex-col .g-flex-col-lg-12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="6" sm="6" md="6" lg="6"> 6/12 </FlexColumn> <FlexColumn xs="7" sm="7" md="7" lg="7"> 7/12 </FlexColumn> <FlexColumn xs="5" sm="5" md="5" lg="5"> 5/12 </FlexColumn> <FlexColumn xs="8" sm="8" md="8" lg="8"> 8/12 </FlexColumn> <FlexColumn xs="4" sm="4" md="4" lg="4"> 4/12 </FlexColumn> <FlexColumn xs="9" sm="9" md="9" lg="9"> 9/12 </FlexColumn> <FlexColumn xs="3" sm="3" md="3" lg="3"> 3/12 </FlexColumn> <FlexColumn xs="10" sm="10" md="10" lg="10"> 10/12 </FlexColumn> <FlexColumn xs="2" sm="2" md="2" lg="2"> 2/12 </FlexColumn> <FlexColumn xs="11" sm="11" md="11" lg="11"> 11/12 </FlexColumn> <FlexColumn xs="1" sm="1" md="1" lg="1"> 1/12 </FlexColumn> </FlexRow> </FlexContainer> );

Vue (JavaScript)<template> <flex-container width="fixed"> <flex-row> <flex-column xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </flex-column> <flex-column xs="12" sm="12" md="12" lg="12"> .g-flex-col .g-flex-col-lg-12 </flex-column> <flex-column xs="1" sm="1" md="1" lg="1"> 1/12 </flex-column> <flex-column xs="11" sm="11" md="11" lg="11"> 11/12 </flex-column> <flex-column xs="2" sm="2" md="2" lg="2"> 2/12 </flex-column> <flex-column xs="10" sm="10" md="10" lg="10"> 10/12 </flex-column> <flex-column xs="3" sm="3" md="3" lg="3"> 3/12 </flex-column> <flex-column xs="9" sm="9" md="9" lg="9"> 9/12 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> 4/12 </flex-column> <flex-column xs="8" sm="8" md="8" lg="8"> 8/12 </flex-column> <flex-column xs="5" sm="5" md="5" lg="5"> 5/12 </flex-column> <flex-column xs="7" sm="7" md="7" lg="7"> 7/12 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> 6/12 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> 6/12 </flex-column> <flex-column xs="7" sm="7" md="7" lg="7"> 7/12 </flex-column> <flex-column xs="5" sm="5" md="5" lg="5"> 5/12 </flex-column> <flex-column xs="8" sm="8" md="8" lg="8"> 8/12 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> 4/12 </flex-column> <flex-column xs="9" sm="9" md="9" lg="9"> 9/12 </flex-column> <flex-column xs="3" sm="3" md="3" lg="3"> 3/12 </flex-column> <flex-column xs="10" sm="10" md="10" lg="10"> 10/12 </flex-column> <flex-column xs="2" sm="2" md="2" lg="2"> 2/12 </flex-column> <flex-column xs="11" sm="11" md="11" lg="11"> 11/12 </flex-column> <flex-column xs="1" sm="1" md="1" lg="1"> 1/12 </flex-column> </flex-row> </flex-container> </template> <script> import Vue from "vue"; import FlexContainer from "@govtnz/ds/build/vue-js/FlexContainer.vue"; import FlexRow from "@govtnz/ds/build/vue-js/FlexRow.vue"; import FlexColumn from "@govtnz/ds/build/vue-js/FlexColumn.vue"; export default { components: { "flex-container": FlexContainer, "flex-row": FlexRow, "flex-column": FlexColumn } }; </script>

Vue (TypeScript)<template> <flex-container width="fixed"> <flex-row> <flex-column xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> .g-flex-col .g-flex-col-md-4 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> .g-flex-col .g-flex-col-md-6 </flex-column> <flex-column xs="12" sm="12" md="12" lg="12"> .g-flex-col .g-flex-col-lg-12 </flex-column> <flex-column xs="1" sm="1" md="1" lg="1"> 1/12 </flex-column> <flex-column xs="11" sm="11" md="11" lg="11"> 11/12 </flex-column> <flex-column xs="2" sm="2" md="2" lg="2"> 2/12 </flex-column> <flex-column xs="10" sm="10" md="10" lg="10"> 10/12 </flex-column> <flex-column xs="3" sm="3" md="3" lg="3"> 3/12 </flex-column> <flex-column xs="9" sm="9" md="9" lg="9"> 9/12 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> 4/12 </flex-column> <flex-column xs="8" sm="8" md="8" lg="8"> 8/12 </flex-column> <flex-column xs="5" sm="5" md="5" lg="5"> 5/12 </flex-column> <flex-column xs="7" sm="7" md="7" lg="7"> 7/12 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> 6/12 </flex-column> <flex-column xs="6" sm="6" md="6" lg="6"> 6/12 </flex-column> <flex-column xs="7" sm="7" md="7" lg="7"> 7/12 </flex-column> <flex-column xs="5" sm="5" md="5" lg="5"> 5/12 </flex-column> <flex-column xs="8" sm="8" md="8" lg="8"> 8/12 </flex-column> <flex-column xs="4" sm="4" md="4" lg="4"> 4/12 </flex-column> <flex-column xs="9" sm="9" md="9" lg="9"> 9/12 </flex-column> <flex-column xs="3" sm="3" md="3" lg="3"> 3/12 </flex-column> <flex-column xs="10" sm="10" md="10" lg="10"> 10/12 </flex-column> <flex-column xs="2" sm="2" md="2" lg="2"> 2/12 </flex-column> <flex-column xs="11" sm="11" md="11" lg="11"> 11/12 </flex-column> <flex-column xs="1" sm="1" md="1" lg="1"> 1/12 </flex-column> </flex-row> </flex-container> </template> <script lang="ts"> import Vue from "vue"; import FlexContainer from "@govtnz/ds/build/vue-ts/FlexContainer.vue"; import FlexRow from "@govtnz/ds/build/vue-ts/FlexRow.vue"; import FlexColumn from "@govtnz/ds/build/vue-ts/FlexColumn.vue"; export default { components: { "flex-container": FlexContainer, "flex-row": FlexRow, "flex-column": FlexColumn } }; </script>

HTML <div class="g-flex-container"> <div class="g-flex-row"> <div class="g-flex-col g-flex-col-xs-4 g-flex-col-sm-4 g-flex-col-md-4 g-flex-col-lg-4" > .g-flex-col .g-flex-col-md-4 </div> <div class="g-flex-col g-flex-col-xs-4 g-flex-col-sm-4 g-flex-col-md-4 g-flex-col-lg-4" > .g-flex-col .g-flex-col-md-4 </div> <div class="g-flex-col g-flex-col-xs-4 g-flex-col-sm-4 g-flex-col-md-4 g-flex-col-lg-4" > .g-flex-col .g-flex-col-md-4 </div> <div class="g-flex-col g-flex-col-xs-6 g-flex-col-sm-6 g-flex-col-md-6 g-flex-col-lg-6" > .g-flex-col .g-flex-col-md-6 </div> <div class="g-flex-col g-flex-col-xs-6 g-flex-col-sm-6 g-flex-col-md-6 g-flex-col-lg-6" > .g-flex-col .g-flex-col-md-6 </div> <div class="g-flex-col g-flex-col-xs-12 g-flex-col-sm-12 g-flex-col-md-12 g-flex-col-lg-12" > .g-flex-col .g-flex-col-lg-12 </div> <div class="g-flex-col g-flex-col-xs-1 g-flex-col-sm-1 g-flex-col-md-1 g-flex-col-lg-1" > 1/12 </div> <div class="g-flex-col g-flex-col-xs-11 g-flex-col-sm-11 g-flex-col-md-11 g-flex-col-lg-11" > 11/12 </div> <div class="g-flex-col g-flex-col-xs-2 g-flex-col-sm-2 g-flex-col-md-2 g-flex-col-lg-2" > 2/12 </div> <div class="g-flex-col g-flex-col-xs-10 g-flex-col-sm-10 g-flex-col-md-10 g-flex-col-lg-10" > 10/12 </div> <div class="g-flex-col g-flex-col-xs-3 g-flex-col-sm-3 g-flex-col-md-3 g-flex-col-lg-3" > 3/12 </div> <div class="g-flex-col g-flex-col-xs-9 g-flex-col-sm-9 g-flex-col-md-9 g-flex-col-lg-9" > 9/12 </div> <div class="g-flex-col g-flex-col-xs-4 g-flex-col-sm-4 g-flex-col-md-4 g-flex-col-lg-4" > 4/12 </div> <div class="g-flex-col g-flex-col-xs-8 g-flex-col-sm-8 g-flex-col-md-8 g-flex-col-lg-8" > 8/12 </div> <div class="g-flex-col g-flex-col-xs-5 g-flex-col-sm-5 g-flex-col-md-5 g-flex-col-lg-5" > 5/12 </div> <div class="g-flex-col g-flex-col-xs-7 g-flex-col-sm-7 g-flex-col-md-7 g-flex-col-lg-7" > 7/12 </div> <div class="g-flex-col g-flex-col-xs-6 g-flex-col-sm-6 g-flex-col-md-6 g-flex-col-lg-6" > 6/12 </div> <div class="g-flex-col g-flex-col-xs-6 g-flex-col-sm-6 g-flex-col-md-6 g-flex-col-lg-6" > 6/12 </div> <div class="g-flex-col g-flex-col-xs-7 g-flex-col-sm-7 g-flex-col-md-7 g-flex-col-lg-7" > 7/12 </div> <div class="g-flex-col g-flex-col-xs-5 g-flex-col-sm-5 g-flex-col-md-5 g-flex-col-lg-5" > 5/12 </div> <div class="g-flex-col g-flex-col-xs-8 g-flex-col-sm-8 g-flex-col-md-8 g-flex-col-lg-8" > 8/12 </div> <div class="g-flex-col g-flex-col-xs-4 g-flex-col-sm-4 g-flex-col-md-4 g-flex-col-lg-4" > 4/12 </div> <div class="g-flex-col g-flex-col-xs-9 g-flex-col-sm-9 g-flex-col-md-9 g-flex-col-lg-9" > 9/12 </div> <div class="g-flex-col g-flex-col-xs-3 g-flex-col-sm-3 g-flex-col-md-3 g-flex-col-lg-3" > 3/12 </div> <div class="g-flex-col g-flex-col-xs-10 g-flex-col-sm-10 g-flex-col-md-10 g-flex-col-lg-10" > 10/12 </div> <div class="g-flex-col g-flex-col-xs-2 g-flex-col-sm-2 g-flex-col-md-2 g-flex-col-lg-2" > 2/12 </div> <div class="g-flex-col g-flex-col-xs-11 g-flex-col-sm-11 g-flex-col-md-11 g-flex-col-lg-11" > 11/12 </div> <div class="g-flex-col g-flex-col-xs-1 g-flex-col-sm-1 g-flex-col-md-1 g-flex-col-lg-1" > 1/12 </div> </div> </div>

twig-embed{% embed "FlexContainer.html.twig" with {'width':'fixed'} only %}{% block children %}{% embed "FlexRow.html.twig" %}{% block children %}{% embed "FlexColumn.html.twig" with {'xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'children':'.g-flex-col .g-flex-col-md-4'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'children':'.g-flex-col .g-flex-col-md-4'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'children':'.g-flex-col .g-flex-col-md-4'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'children':'.g-flex-col .g-flex-col-md-6'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'children':'.g-flex-col .g-flex-col-md-6'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'12', 'sm':'12', 'md':'12', 'lg':'12', 'children':'.g-flex-col .g-flex-col-lg-12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'1', 'sm':'1', 'md':'1', 'lg':'1', 'children':'1/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'11', 'sm':'11', 'md':'11', 'lg':'11', 'children':'11/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'2', 'sm':'2', 'md':'2', 'lg':'2', 'children':'2/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'10', 'sm':'10', 'md':'10', 'lg':'10', 'children':'10/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'3', 'sm':'3', 'md':'3', 'lg':'3', 'children':'3/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'9', 'sm':'9', 'md':'9', 'lg':'9', 'children':'9/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'children':'4/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'8', 'sm':'8', 'md':'8', 'lg':'8', 'children':'8/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'5', 'sm':'5', 'md':'5', 'lg':'5', 'children':'5/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'7', 'sm':'7', 'md':'7', 'lg':'7', 'children':'7/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'children':'6/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'6', 'sm':'6', 'md':'6', 'lg':'6', 'children':'6/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'7', 'sm':'7', 'md':'7', 'lg':'7', 'children':'7/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'5', 'sm':'5', 'md':'5', 'lg':'5', 'children':'5/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'8', 'sm':'8', 'md':'8', 'lg':'8', 'children':'8/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'4', 'sm':'4', 'md':'4', 'lg':'4', 'children':'4/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'9', 'sm':'9', 'md':'9', 'lg':'9', 'children':'9/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'3', 'sm':'3', 'md':'3', 'lg':'3', 'children':'3/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'10', 'sm':'10', 'md':'10', 'lg':'10', 'children':'10/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'2', 'sm':'2', 'md':'2', 'lg':'2', 'children':'2/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'11', 'sm':'11', 'md':'11', 'lg':'11', 'children':'11/12'} only %}{% endembed %} {% embed "FlexColumn.html.twig" with {'xs':'1', 'sm':'1', 'md':'1', 'lg':'1', 'children':'1/12'} only %}{% endembed %}{% endblock %}{% endembed %}{% endblock %}{% endembed %}

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 NZGDS Slack app, or discuss Flexbox grid on 'GitHub issues'.