If all elements span exactly one column, can Susy automatically (without specifying omega
) fill a multi column layout?
What I want:
+---------+---------+
| I | want |
+---------+---------+
| two | columns |
+---------+---------+
What I get (code below):
+---------+
| I |
+---------+
| want |
+---------+
| two |
+---------+
| columns |
+---------+
HTML:
<div id="container">
<div>I</div>
<div>want</div>
<div>two</div>
<div>columns!</div>
</div>
SCSS:
@import 'susy';
$total-columns: 2;
$column-width: 200px;
$gutter-width: 5px;
$grid-padding: 10px;
#container {
@include container;
@include susy-grid-background;
&>div {
@include span-columns(1);
height: 50px;
}
}
No. You need to specify omega, because otherwise Susy would have to assume too many things about your markup and desired outcome. We try to avoid that at all costs. The best way to solve this is to use the nth-omega()
mixin:
div {
@include span-columns(1);
@include nth-omega(even);
}
It's a simple extension of the :nth-child()
selector, and takes the same keywords, numbers, or algorithms.