How to generate columns with SUSY?

Yes, Suzy has how to create Grids automatically. He was made for it . It may take a few days to learn this, but it works well. Something you should be prepared for right now is that Suzy will be easier to understand if you know a little more about how CSS can be responsive. Much of the difficulty of doing something more advanced in it is because the developer needs to better understand how this works without it.

Right now, Suzy is great for professionals who want minimal clean CSS code . Take this into account.

How to learn the basic steps with Suzy

See the tutorial at link . I put the important parts here

You will need to set some basic properties before you start

$total-columns  : 12;             // Grid com 12 colunas
$column-width   : 4em;            // Cada coluna ocupa 4em
$gutter-width   : 1em;            // 1em de vão entre as colunas
$grid-padding   : $gutter-width;  // grid-padding é igual aos vãos

Done this, is to read the reference and quit using. An example

.page {
  // .page atuará como um contener
  @include container;

  // header e footer serão largura completa por padrão.
  header, footer { clear: both; }

  // nav será largura de 3 colunas de um total de 12.
  nav { @include span-columns(3,12); }

  .content {
    // .content irá do final da coluna 9 (omega) de 12.
    @include span-columns(9 omega,12);

    // .main terá largura de 6 de 12 colunas
    .main { @include span-columns(6,9); }

    // .secondary ocupará as 3 ultimas colunas (omega) das 9 disponiveis.
    .secondary { @include span-columns(3 omega,9); }
  }
}

Reference

As soon as you leave the basic tutorial, you will often see Suzy's official reference on the site that explains how to do this is his official reference at link