nzGrid

An intelligent layout engine built for Angular

Responsive

nzGrid is the first layout system that is truly responsive in every way.

Relative

Instead of depending on media queries and viewport dimensions, responsive calculations and classes are made relative to their containing element.

Painless

This takes the pain out of nested layouts, and is a beautiful way to use a grid in Angular.

Lean & Powerful

nzGrid is built on the amazing Flexbox Grid and stylus.

Installation

1.

$ bower/npm install nz-grid --save

2.

Include dist/nzGrid.min.js and dist/nzGrid.min.css

3.

Add nzGrid to your app's dependencies.

Simple Markup & Usage

col's must be defined as direct children of row's

row's can be infinitely nested inside of col's

Breakpoints are defined like so: col="xs-sm-md-lg", and inherited upwards. Therefore,col="12--4" == col="12-12-4-4".

Breakpoints are backwards compatible with classic grid style classes class="col-sm-12 ..."

If no breakbpoints are specified eg. col, it will result in equally distributed columns.

offset, reorder, align examples can be found at Flexbox Grid, and are likewise implemented as a class... for now ;)

For code examples, take a look at the Readme on Github!

Nested Grids that bahave themselves!

In other layout libraries, columns are calculated on the viewport dimensions, and this makes nesting multiple grids almost impossible to manage. Instead of using the viewport, each row is self aware of it's size and knows how to keep it's kids in line! So now you can nest grids and structure infinitely and never get weird breakpoint pains.