“I like the idea of grids-on-demand, rather than a strict framework.”

Chris Coyier, CSS Tricks

The benefit of thinking in “grid” is that you aren’t bound to “px” or “em” or whatever you use to specify the element’s dimensions. You speak with non-technical people and designers using an easy-to-understand concept of columns.

Grid CSS spec is an awesome future of CSS, but it doesn’t work in some older browsers we have to support. So we found a very good alternative – Susy library: it’s a collection of handy SCSS mixins you can easily use in your components without a necessity to alter the existing layout or approaches you already use.

First, let’s install Susy so that we could import its functions into the code:

Command Line

        npm install susy
      

We’re are ready now to dive into some of the concepts of this library.

 Span

Imagine we have a container with a grid of 4 columns and want the child element to take all 4 columns. Just call `span()` function with the number of columns you want to get:

CSS

        @import "~susy/sass/susy";

.Article {
  width: span(4);
}
      
The child element takes 4 columns out of 4 (100% of its parent).

The child element takes 4 columns out of 4 (100% of its parent).

by Dmitry Salnikov

Now, let’s try to specify 3 columns:

CSS

        @import "~susy/sass/susy";

.Article {
  width: span(3);
}
      
The child element now takes 3 columns out of 4.

The child element now takes 3 columns out of 4.

by Dmitry Salnikov

Once compiled, the `span` function becomes a `calc` expression. We’ll explore more this function later, once we learn about other concepts in Susy.

 Spread

“Spread” specifies whether or not we include outer gutters into our “span” expression and if yes – how many? It can be one of the following values:

  • narrow (default value) – span includes only columns and gutters between them:
Narrow “spread” means it doesn’t include any additional gutters, except those between columns.

Narrow “spread” means it doesn’t include any additional gutters, except those between columns.

by Dmitry Salnikov

  • wide – span includes 1 additional gutter:
Wide “spread” means we include one outer gutter.

Wide “spread” means we include one outer gutter.

by Dmitry Salnikov

  • wider – span includes 2 additional outer gutters:
Wider “spread” means we include two outer gutters into our “span” expression.

Wider “spread” means we include two outer gutters into our “span” expression.

by Dmitry Salnikov

Span + Spread

Now let’s combine “span” and “spread” together to make our layout more interesting:

CSS

        .Article {
  width: span(3 wide);
}
      

Here we literally say: “give me the width equal to 3 columns + 1 gutter”.

“Wide” span spreads over one additional gutter.

“Wide” span spreads over one additional gutter.

by Dmitry Salnikov

Now, let's try the "wider" option:

CSS

        .Article {
  width: span(3 wider);
}
      
“Wider” span spreads over two additional gutters.

“Wider” span spreads over two additional gutters.

by Dmitry Salnikov

Grid config

By default Susy uses a grid of 4 columns with 25% gutters and narrow spread:

CSS

        $susy: (
  'columns': susy-repeat(4),
  'gutters': 0.25,
  'spread': 'narrow',
  'container-spread': 'narrow',
);

      

“Columns” property defines all your columns: how many and width of each one.

CSS

        ‘columns’: 25px 50px 30px
      

You can use a special function “susy-repeat”, which is similar to repeat(count, value) function that is available in native CSS Grid templates.

CSS

        ‘columns’: 25px 50px 50px 50px 50px 50px 50px 30px

/* this is similar to the definition above, but using susy-repeat */
‘columns’: 25px susy-repeat(6, 50px) 30px
      

Now let’s define our own grid config and use it with span:

CSS

        @import "~susy/sass/susy";

$grid-of-12: (
  'columns': susy-repeat(12),
  'gutters': 16px,
  'spread': 'wide',
  'container-spread': 'narrow'
);

.Article {
  width: span(8 narrow, $grid-of-12);
  margin-left: span(2, $grid-of-12);
}
      

For the “width” we override spread value (“wide” by default, as we defined in our $grid-of-12 config) with “narrow” value. Article element will take 8 columns, and we shift to the right via “margin” by 2 columns and an additional gutter (spread: ‘wide’). We can omit passing the spread value in the span function, as we already had defined it in our grid config.

The main part here – specifying a grid config as a second “span” argument. Susy now knows about your columns and will break all the available space inside of Article’s parent to 12 equal columns with 16px gutters between them.

Using the 12-columns grid, defined with a custom grid config.

Using the 12-columns grid, defined with a custom grid config.

by Dmitry Salnikov

As you see, span() can be used not only for width/height but also for any size CSS properties (padding, margin, left/top/right/bottom, border, etc.). Just be careful with including span into your own calc expressions, as nested “calc”s are not supported in Internet Explorer and older browsers.

Visualize the Grid

Of course, the concept of a grid is imaginary. You say “this element takes this many columns”, but you don’t actually see those columns on the page and it can be hard to detect and fix design misalignments. Susy got you covered with the help of “svg-grid” plugin. Just import it once along with the Susy library and you can use “susy-svg-grid()” function to display a background with your grid visualization:

CSS

        @import "~susy/sass/susy";
@import '~susy/sass/plugins/svg-grid';

$grid-of-12: (
  'columns': susy-repeat(12),
  'gutters': 0.25,
  'spread': 'narrow',
  'container-spread': 'narrow'
);

body {
  border: 1px solid black;
  background: susy-svg-grid($grid: $grid-of-12, $colors: lightskyblue);
}

.Article {
  padding-left: span(3, $grid-of-12);
  padding-right: span(3, $grid-of-12);
  border: 4px solid black;
  background-color: #cfbde7;
}
      
Visualizing the 12-columns grid with “lightskyblue” color using susy-svg-grid() function.

Visualizing the 12-columns grid with “lightskyblue” color using susy-svg-grid() function.

by Dmitry Salnikov

As you see, using Susy is extremely easy and doesn’t require any change in your existing layout. I covered only the most important functionality and you probably don’t need anything else to start using Susy, but there are more things to learn if you would like to use Susy on a more advanced level. Read the official documentation and discover other helpful functions.