Different Grid Types


Susy converts all internal grid-widths into percentages, so that once you have a grid it is able to respond and flex in any way you choose. How the grid responds depends on the outer container.

Here are a few examples of grids with different container styles.

The Magic Grid

The default grid in Susy is what I call "the magic grid". Fluid on the inside, with an elastic container max-width. The em-width makes it responsive to font sizes, while the max-width setting makes it responsive to window sizes.

// Setting up the Magic Grid
$total-columns: 12; // 12 columns
$gutter-width: 1em; // with 1em gutters

.magic-container { @include container; }




The Fluid Grid

There are many ways to build a fluid grid with Susy. You could simply replace all the em-widths above with percentage widths. But that's actually the hard way, unless you know exactly what percentages you want to use. Let me show you some easier options.


// A Fluid Grid based on 960gs
$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;


// Make it fluid!
$container-style: fluid;

.fluid-container { @include container; }

That's it. You have a fluid grid based on the dimensions of the 960gs. By default the container is set to 100% width, but you can override that as well:

// Make it smaller
$container-width: 60%;

.fluid-60-container { @include container; }

The Static Grid

Perhaps you don't want your grid to respond to the size of the viewport at all. By telling Susy you want a "static" grid, Susy will apply your container-width directly to the "width" property.

This is your more standard grid type. Most "elastic" and "fixed" grids fit this category. Unlike the magic grid, it doesn't collapse.

Let's take our first grid and make it static:

// Setting up the Static Grid
$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: 1em;

$container-style: static;

.static-container { @include container; }

Mixing and matching


Want the 960 grid system updated to 1140px?

// The 960gs in 1140px
$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;

$container-style: static;
$container-width: 1140px;

.larger-960-container { @include container; }

Why not make it elastic and magic?

// The 960gs in ems
$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;

$container-style: magic;
$container-width: 60em;

.elastic-960-container { @include container; }


// Elastic grid as percentages
$total-columns: 12;
$column-width: 6%;
$gutter-width: 2%;
$grid-padding: 1%;

$container-style: magic;
$container-width: 50em;

.elastic-percentage-container { @include container; }

Play around. Start to add breakpoints, with different grids at different sizes, or just pick the grid best suited for your site: magic-elastic, magic-fixed, static-elastic, static-fixed, fluid, defined as one but displayed as another... The possibilities are endless. Have fun!