View on GitHub


Sass grid framework 100% fluid, semantic, clean and allowing infinte nesting level with the use of one single mixin.

Download this project as a .zip file Download this project as a tar.gz file


One mixin to rule them all

Zass is a Sass (CSS) fluid grid framework. Zass is 100% fluid, semantic, clean and allow infinite nesting of columns with the use of a single mixin.


Zass framework requires you are working with Sass.

With git, to get latest stable version:

git clone

Otherwise, download it from:

Move zass files to your sass directory and import sass/_zass.scss from your sass stylesheet:

@import 'sass/zass';

How does it work?

First of all, you have to configure your grid through three variables. Here it is an example for a 960px grid:

$zass-column-width: 60px; //Grid columns width
$zass-gutter-width: 20px; //Grid gutters width
$zass-grid-units: 12; //Grid number of columns

Then, you are ready to start creating and nesting as many columns as you want using the zass-column() mixin:

zass-column($n, $parent-n, $position, $push, $pull);

Here it is an explanation of zass-column parameters:

So, let say you have following DOM structure:

<div id="col1">
  <p>Column 1</p>

<div id="col2">
  <div id="col2-1">
    <p>Column 2-1</p>
  <div id="col2-2">
   <p>Column 2-2</p>

 <div id="col3">
   <p>Column 3</p>

With Zass, you could build quickly a grid layout:

@import '../../zass';

$zass-column-width: 60px;
$zass-gutter-width: 20px;
$zass-grid-units: 12;

#col1 {
   @include zass-column(3); //Take up three grid units

#col2 {
   @include zass-column(7); //Take up seven grid units
   #col2-1 {
      @include zass-column(4, 7, 'left'); //Take up 4 grid units inside #col2. It's the left one.
   #col2-2 {
      @include zass-column(3, 7, 'right'); //Take up 3 grid units inside #col2. It's the right one.

#col3 {
   @include zass-column(1, $push: 1); //Take up one grid unit and push one more.

Optionally, you can use a second mixin, zass-grid(), if you want to set grid width as the maximum width for a given container. That way, a perfect pixel photo of a design is achieved for resolutions greater or equal than grid pixel width while it is still 100% fluid for lower resolutions:

zass-grid($em, $rfs)

In our example:

#wrapper {
  @include zass-grid(true, 16px); //It ouputs "max-width: 60em;" 


#wrapper {
  @include zass-grid(false); //Will ouput "max-width: 960px;"

More examples

Look at the examples/ directory for more examples.


Variables, functions and mixins are fully documented in the source code.

Contact & Copyright

Copyright 2012, Marc Busqué Pérez, under GNU LESSER GENERAL PUBLIC LICENSE -

If you want more control with your grid layout, you can check fluidizer