nanogrid

Lightweight fluid responsive SASS/CSS grid with gutters

Inspired by Ungrid and BASSCSS I have decided to combine the power of both... And add gutters.

Why?

Columns are magically aligned to have equal width. No need to set sizes just add as many as needed.

You can specify fixed width by using grid classes, the reset of the space will be split between remaining columns.

Align columns to the left, right or center them.

Did I mention vertical alignment and equal height?

But wait, there's more. Just check the examples

Installation

Equal width

As many as needed
µ
µ
µ
Three...
µ
µ
µ
µ
µ
µ
µ
Five?
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
Seven!
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
Nine
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
o_o
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
µ
13
µ
µ
µ
µ
µ
µ
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Fixed width

Using the default $nanogrid-columns: 12 variable you have classes from .col-1 to .col-12 out of the box providing some creative freedom.

Other divisions can be generated in SASS by assigning value to $nanogrid-columns

The rest of the space will be occupied equally

µ.col-6
µ
µ
µ
µ
µ.col-6
µ
µ
µ.col-3
µ
µ
µ.col-6
<div class="row">
  <div class="col-6"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

          
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col-6"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col-6"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Left aligned

Simply set width with .col-X, in fact you can use .col-x freely on elements. They obey breakpoint.

µ.col-6
<div class="col-6"></div>

Centered

Since .col-X just setting up width you don't need anyhing other than .col-center for centering:

µ.col-6.col-center
<div class="col-6 col-center"></div>

Right-aligned

.col-right on the other hand requires some form of clearfix (provided):

µ.col-6.col-right
<div class="clearfix">
  <div class="col-6 col-right"></div>
</div>

Vertical alignment

This one is hard to beat using conventional grids.


µ









µ.col-middle


µ.col-bottom

<div class="row">
  <div class="col"></div>
  <div class="col col-middle"></div>
  <div class="col col-bottom"></div>
</div>

Without gutters

This uses BASSCSS approach so you have to specify widths.

µ
µ
µ
<div class="clearfix">
  <div class="col col-4"></div>
  <div class="col col-4"></div>
  <div class="col col-4"></div>
</div>

Installation

You need only one file. 

http://firedev.github.io/nanogrid/nanogrid.css

Git

$ git clone http://github.com/firedev/nanogrid

Bower

$ bower install nanogrid

Ruby on Rails

source 'https://rails-assets.org' do
  gem 'rails-assets-nanogrid'
end
// import 'nanogrid'

SASS Variables

$nanogrid-gutter: 1rem !default
$nanogrid-breakpoint: 30rem !default
$nanogrid-columns: 12 !default
With ♥ firedev.com