Core

Grid — Lanes

A CSS-grid system for auto-flow layouts: .ng-grid + .ng-lanes-*. Built for card decks and dashboards. For 12-column page layouts use Grid — Flex.

Where Flex sizes each column by hand, Lanes lay items into tracks and let them flow automatically. You set the number of lanes (or a minimum item width) on the grid; children drop into place. Mobile: below sm a grid collapses to a single column — add ng-mobile-grid to keep the lanes on small screens.

Fixed lanes

Set the number of equal tracks with ng-lanes-1 … ng-lanes-12; items flow across them. Spacing is set with ng-gap-* on the grid.

1
2
3
4
5
6
grid.html 
<div class="ng-grid ng-lanes-3 ng-gap-md">
    <div class="nxi-grid-cell">1</div>
    <div class="nxi-grid-cell">2</div>
    <div class="nxi-grid-cell">3</div>
    <div class="nxi-grid-cell">4</div>
    <div class="nxi-grid-cell">5</div>
    <div class="nxi-grid-cell">6</div>
</div>

Auto lanes

Instead of a fixed count, give a minimum item width with ng-autolanes-{xs…xl}. The grid fits as many tracks as it can and reflows on resize — no breakpoints needed.

auto
auto
auto
auto
auto
grid.html 
<div class="ng-grid ng-autolanes-m ng-gap-md">
    <div class="nxi-grid-cell">auto</div>
    <div class="nxi-grid-cell">auto</div>
    <div class="nxi-grid-cell">auto</div>
    <div class="nxi-grid-cell">auto</div>
    <div class="nxi-grid-cell">auto</div>
</div>

Min widths

ng-autolanes-xs · 140 ng-autolanes-s · 180 ng-autolanes-m · 220 ng-autolanes-l · 280 ng-autolanes-xl · 340

Spanning lanes

Make an item occupy more than one track with ng-wide-{n} (per-breakpoint via ng-wide-<bp>-<n>). Ideal for a featured tile in a deck.

ng-wide-2 (spans two lanes)
1
1
1
grid.html 
<div class="ng-grid ng-lanes-3 ng-gap-md">
    <div class="nxi-grid-cell ng-wide-2">ng-wide-2 (spans two lanes)</div>
    <div class="nxi-grid-cell">1</div>
    <div class="nxi-grid-cell">1</div>
    <div class="nxi-grid-cell">1</div>
</div>

Responsive lanes

Change the track count per breakpoint: ng-lanes-<bp>-<n>. Here two lanes on mobile become four from md up.

2 → md-4
2 → md-4
2 → md-4
2 → md-4
grid.html 
<div class="ng-grid ng-lanes-2 ng-lanes-md-4 ng-gap-md">
    <div class="nxi-grid-cell">2 → md-4</div>
    <div class="nxi-grid-cell">2 → md-4</div>
    <div class="nxi-grid-cell">2 → md-4</div>
    <div class="nxi-grid-cell">2 → md-4</div>
</div>

Use case — dashboard

Auto lanes shine for widget decks: cards keep a comfortable minimum width and reflow to fill the space at any viewport.

Widget A
Widget B
Widget C
Widget D
grid.html 
<div class="ng-grid ng-autolanes-l ng-gap-lg">
    <div class="ng-card"><div class="ng-card-body">Widget A</div></div>
    <div class="ng-card"><div class="ng-card-body">Widget B</div></div>
    <div class="ng-card"><div class="ng-card-body">Widget C</div></div>
    <div class="ng-card"><div class="ng-card-body">Widget D</div></div>
</div>

Alignment

Distribute and align the tracks/items within the grid.

Flow (horizontal) & stack (vertical)

ng-flow-start ng-flow-center ng-flow-end ng-flow-between ng-flow-around ng-flow-evenly
ng-stack-start ng-stack-center ng-stack-end ng-stack-stretch ng-self-{k}

Reference

Gap

ng-gap-0 ng-gap-xs ng-gap-sm ng-gap-md ng-gap-lg ng-gap-xl ng-gap-<bp>-<k>

Core classes

ng-grid ng-lanes-1 … 12 ng-lanes-<bp>-<n> ng-autolanes-{xs…xl} ng-wide-{n} ng-mobile-grid ng-box