NIO Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, 4 default responsive tiers, Sass variables and mixins.

How it works

NIO grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

<div class="niogrid-container-grid">
  <div class="niogrid-row">
    <div class="niogrid-col-4">
      One of three columns
    </div>
    <div class="niogrid-col-4">
      One of three columns
    </div>
    <div class="niogrid-col-4">
      One of three columns
    </div>
  </div>
</div>

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .niogrid-container-grid.

Grid options

pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

Nesting

To nest your content with the default grid, add a new .row and set of .niogrid-col-* columns within an existing .niogrid-col-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<div class="niogrid-row">
    <div class="col-9">
        Level 1: .col-9
        <div class="niogrid-row">
            <div class="niogrid-col-4">
                Level 2: .col-4
            </div>

            <div class="niogrid-col-5">
                Level 2: .col-5
            </div>
        </div>
    </div>
</div>

Offset classes

Move columns to the right using .niogrid-offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .niogrid-offset-md-3 moves .col-md-3 over four columns. Like cols, we have basic offsets for all viewport and 3 offset for corresponding viewports. Below is a basic example of basic offset.

<div class="niogrid-row">
    <div class="niogrid-col-6" >
        without offset
    </div>
</div>

<div class="niogrid-row">
    <div class="niogrid-col-6 niogrid-offset-3">
        with 3 column offset
    </div>
</div>

<div class="niogrid-row">
    <div class="niogrid-col-6 niogrid-offset-6" >
        with 6 column offset
    </div>
</div>

Margins

There are four margin unit vars we can use in the code base and here is an example down below:

$sm-margin: 30.25px;

$md-margin: 55px;

$lg-margin: 101.67px;

$xl-margin: 110px;

<div className="niogrid-row" style={{ margin: '0 $xl-margin' }}>
    <div className="niogrid-col-3">
        3
    </div>
    <div className="niogrid-col-3">
        3
    </div>
    <div className="niogrid-col-3">
        3
    </div>
</div>

Mobile examples

In some situations, we may only have two columns on mobile design. In this case, we can use niogrid-col-sm-6 to separate it into two parts

<div class="niogrid-row">
    <div class="niogrid-col-sm-6">
        mobile left
    </div>

    <div class="niogrid-col-sm-6">
        mobile right
    </div>
</div>