set column position with Susy

Question

How do I set where the columns show up in Susy?

I thought this would work:

#idLeftColumn{
@include span(1 at 1 first);
}

#idMiddleColumn{
@include span(1 at 2);
}

#idRightColumn{
@include span(1 at 3 last);
}

The html code has the order middle column, left column and then right column.

The website is showing the middle column first. This is the order in the source code.

Here is the full code: http://sassmeister.com/gist/60d85878921ca500c681

score 0 · Accepted Answer · answered Mar 12 '15 at 16:57

Susy uses standard float layout by default. Because floats stack up in the flow, you can't position them in any "absolute" way — you have to push or pull them from one position to another. Susy has no way of knowing their default position in the flow, but you can do it manually with the push() and pull() mixins.

Or you can use the isolation output option, which uses negative margins to pull everything flush left — and then allows you to position them in the way you are attempting above.

You can either do that inline:

#idLeftColumn{
  @include span(1 at 1 isolate); // "at 1 first" is redundant
}

#idMiddleColumn{
  @include span(1 at 2 isolate);
}

Or you can do it globally:

@include layout(isolate);

#idLeftColumn{
  @include span(1 at 1); // "at 1 first" is redundant
}

#idMiddleColumn{
  @include span(1 at 2);
}

set column position with Susy

1 Answers1