CODEWITHSUNDEEP
csssasssusy-compass
Francesco Belladonna
Francesco Belladonna

Reputation: 11689

How to obtain "stacking grid" in Susy (column on top of another)

Being completely new to susy and responsive web design, I'm trying to understand how to obtain this result with Susy (grid framework I've chosen): http://semantic.gs/examples/responsive/responsive.html

I can't find a way to achieve the same result so I started asking myself if Susy is intended to avoid that way of handling a layout grid.

I would like to know if it's possible to obtain that result (and how) or, otherwise, if Susy is not intended for that type of grid.

Thanks

Upvotes: 0

Views: 237

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

Susy is designed to let you decide how your grids work, and how they change. What you want is a simple mobile-first layout pattern - very easy with Susy. The stacking part is automatic: block elements stack by default - you don't even need Susy. You only need Susy above a given breakpoint. For that, you can use at-breakpoint:

// your small screen layout

@include at-breakpoint($total-columns) {
  // your large-screen layout
}

Check the Susy Docs for more details on what all you can do. There's even a demo for this.

Upvotes: 1

Related Questions