CODEWITHSUNDEEP
csssusy-sass
Squis
Squis

Reputation: 931

Can I stack columns with Susy?

Loving Susy, so far! Now I'd like this initial layout...

3 Column Grid

... to turn into this layout on a smaller screen:

2 Column Grid

Is this possible using Susy? Furthermore, I'd want the AC-column to function as a single entity when they're in the same column, since I'd like to give them sticky behavior.

Upvotes: 0

Views: 165

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

You don't need to clear anything, you just need to space them differently. I've put together a simple Sassmeister demo. Mine is set up mobile-first, with arbitrary total-columns and breakpoints, but you can change that however you want.

I wrapped a and c together in a single container, so you could treat them as a unit:

<div class="sticky">
  <div class="item a">A</div>
  <div class="item c">C</div>
</div>
<div class="item b">B</div>

At a small screen size, you lay out sticky to one side, and b to the other side, and then let a and c stack vertically inside sticky.

At a larger screen size, you want sticky to have no set float, width, margin, or anything else that gives it structure. You want it to collapse out of the way. Then you lay out a, b, and c next to each other — using last on c to set the correct order.

There would be other ways to pull this off with different source-orders, but hopefully this gives you a good start.

Upvotes: 3

Related Questions