Core

Grid — Flex

A 12-column flexbox grid: .ng-row wraps .ng-col-*. Built for traditional column layouts. For auto-flow dashboards see Grid — Lanes.

A row is a flex container; columns are its children. Widths are twelfths: ng-col-6 is half, ng-col-4 a third, and so on. Mobile-first: below sm (576px) every column becomes full-width and stacks, so you size up from a breakpoint — e.g. ng-col-12 ng-col-md-6.

Columns

Fixed twelfths ng-col-1 … ng-col-12 inside a ng-row; each row sums to 12.

ng-col-4
ng-col-4
ng-col-4
grid.html 
<div class="ng-row ng-gutter-md">
    <div class="ng-col-4"><div class="nxi-grid-cell">ng-col-4</div></div>
    <div class="ng-col-4"><div class="nxi-grid-cell">ng-col-4</div></div>
    <div class="ng-col-4"><div class="nxi-grid-cell">ng-col-4</div></div>
</div>

Fluid columns

Plain ng-col (no number) shares the available space equally — no need to do the math.

ng-col
ng-col
ng-col
grid.html 
<div class="ng-row ng-gutter-md">
    <div class="ng-col"><div class="nxi-grid-cell">ng-col</div></div>
    <div class="ng-col"><div class="nxi-grid-cell">ng-col</div></div>
    <div class="ng-col"><div class="nxi-grid-cell">ng-col</div></div>
</div>

Fixed + fluid

Mix a fixed column with a fluid one: the fixed keeps its width, ng-col fills whatever is left.

ng-col-3 (fixed)
ng-col (fills the rest)
grid.html 
<div class="ng-row ng-gutter-md">
    <div class="ng-col-3"><div class="nxi-grid-cell">ng-col-3 (fixed)</div></div>
    <div class="ng-col"><div class="nxi-grid-cell">ng-col (fills the rest)</div></div>
</div>

Common layouts

Content + aside

The classic 8/4 split: main content with a side panel that stacks under it on mobile.

main · ng-col-md-8
aside · ng-col-md-4
grid.html 
<div class="ng-row ng-gutter-lg">
    <div class="ng-col-12 ng-col-md-8"><div class="nxi-grid-cell">main · ng-col-md-8</div></div>
    <div class="ng-col-12 ng-col-md-4"><div class="nxi-grid-cell">aside · ng-col-md-4</div></div>
</div>

Sidebar + content

A 3/9 split for app-style pages — a narrow navigation column next to the main area.

sidebar · md-3
content · md-9
grid.html 
<div class="ng-row ng-gutter-lg">
    <div class="ng-col-12 ng-col-md-3"><div class="nxi-grid-cell" style="padding-block: 30px">sidebar · md-3</div></div>
    <div class="ng-col-12 ng-col-md-9"><div class="nxi-grid-cell" style="padding-block: 30px">content · md-9</div></div>
</div>

Responsive card grid

Three cards per row on md+, stacked on mobile. same-height keeps them even.

Card one
Card two
Card three
grid.html 
<div class="ng-row ng-gutter-lg same-height">
    <div class="ng-col-12 ng-col-md-4">
        <div class="ng-card"><div class="ng-card-body">Card one</div></div>
    </div>
    <div class="ng-col-12 ng-col-md-4">
        <div class="ng-card"><div class="ng-card-body">Card two</div></div>
    </div>
    <div class="ng-col-12 ng-col-md-4">
        <div class="ng-card"><div class="ng-card-body">Card three</div></div>
    </div>
</div>

Gutter

Space between columns goes on the ng-row (half-gutter model, edge-aligned, never overflows). Don't use an inline gap — it breaks the column math.

ng-gutter-0 ng-gutter-xs ng-gutter-sm ng-gutter-md ng-gutter-lg ng-gutter-xl

Alignment

Align columns inside the row with ng-row-justify-* (horizontal) and ng-row-align-* (vertical). Use these for the grid — not the generic flex helpers.

Vertical — ng-row-align-center

tall
centered
centered
grid.html 
<div class="ng-row ng-gutter-md ng-row-align-center">
    <div class="ng-col-4"><div class="nxi-grid-cell" style="padding-block: 30px">tall</div></div>
    <div class="ng-col-4"><div class="nxi-grid-cell">centered</div></div>
    <div class="ng-col-4"><div class="nxi-grid-cell">centered</div></div>
</div>

Horizontal — ng-row-justify-between

ng-col-3
ng-col-3
grid.html 
<div class="ng-row ng-gutter-md ng-row-justify-between">
    <div class="ng-col-3"><div class="nxi-grid-cell">ng-col-3</div></div>
    <div class="ng-col-3"><div class="nxi-grid-cell">ng-col-3</div></div>
</div>

All keys

ng-row-justify-start ng-row-justify-center ng-row-justify-end ng-row-justify-between ng-row-justify-around ng-row-justify-evenly
ng-row-align-start ng-row-align-center ng-row-align-end ng-row-align-stretch ng-row-align-baseline ng-col-align-{k}

Offset & order

Offset — push a column right

ng-offset-4 pushes a ng-col-4 by four twelfths, centering it.

ng-col-4 · ng-offset-4
grid.html 
<div class="ng-row ng-gutter-md">
    <div class="ng-col-4 ng-offset-4"><div class="nxi-grid-cell">ng-col-4 · ng-offset-4</div></div>
</div>

Order — reorder per breakpoint

Visual order can differ from DOM order: here the first element renders second from md up.

first in DOM · order-md-2
second in DOM · order-md-1
grid.html 
<div class="ng-row ng-gutter-md">
    <div class="ng-col-6 ng-order-md-2"><div class="nxi-grid-cell">first in DOM · order-md-2</div></div>
    <div class="ng-col-6 ng-order-md-1"><div class="nxi-grid-cell">second in DOM · order-md-1</div></div>
</div>
ng-offset-1 … ng-offset-11 ng-offset-<bp>-<n> ng-order-<bp>-<n>

Nested grids

A column is a full row context: drop another ng-row inside any ng-col to subdivide it.

nested
nested
ng-col-6
grid.html 
<div class="ng-row ng-gutter-md">
    <div class="ng-col-6">
        <div class="ng-row ng-gutter-sm">
            <div class="ng-col-6"><div class="nxi-grid-cell">nested</div></div>
            <div class="ng-col-6"><div class="nxi-grid-cell">nested</div></div>
        </div>
    </div>
    <div class="ng-col-6"><div class="nxi-grid-cell">ng-col-6</div></div>
</div>

Reference

Breakpoints

sm · 576 md · 768 lg · 896 xlg · 1024 xl · 1280 xxl · 1400

Row / column utilities

ng-row ng-col ng-col-1 … 12 ng-col-<bp>-<n> go-column same-height ng-col-stack ng-col-balance-2