Search code examples
cssresponsive-designsusy-compass

How can I place two grid items above each other using Susy?


I have a CSS grid created with Susy, with two asides and a content section, like this:

|1| |2| |content|
        |content|
        |content|

The source order is content-1-2, but the above is easy enough using push() and pull().

On a narrower screen, I want the asides to be above each other, like this:

|1| |content|
|2| |content|
    |content|

I am able to pull them into the same column, but they will simply overlap. How can I make this work?


Solution

  • I wouldn't use push/pull to achieve your basic arrangement. Instead, simply set your content as "omega" and it will float right, leaving space for asides 1 and 2 to stack or float next to each other automatically. Whenever you can, keeping objects in the natural "flow" is a really good idea, and in this case it solves your problem. :)