Susy Next Grids

Question

I'm just trying to familiarise myself with the new Susy Next options and I have my code:

.grid
   +clearfix
   clear: both

.grid__item
   +gallery(1)
   +rem(margin-bottom, 20px)

I want a 5 column grid inside .grid so that .grid__item's span 1 column in a gallery formation.

If I add +with-layout(5 1/4 fluid show background) inside .grid then I don't get the debug background output.

If I add +container(5 1/4 fluid show background) inside .grid then I get the background but the items don't span correctly as the context is not there.

Are there any docs on how to use +with-layout as I think that might solve it but can;t find anything on http://susydocs.oddbird.net/en/latest/install

I'm just after the best way to use Susy Next to solve this. I need .grid to contain 5 fluid columns with 1/4 gutters and to then allow me to span my .grid__item's based upon it. I also need to be able to output debug backgrounds on .grid.

I think my main issue is that I am getting confused between: +container, with-layout and how things roll in together. I have read the latest docs but it doesn;t quite click in my head.

Might just be me!

Answer 1

You need to establish your grid. with-layout is one way to do that for a small block of nested code, but why not just set them globally? There are several ways you could do it, all of them documented, but most likely you just want the layout() mixin:

// note that it isn't nested under anything.
+layout(5 1/4 fluid show background)

Now you have a global context, and you can build your grid:

.grid
  +container

.grid__item
  +gallery(1)

That's it. If you really just want the grid set for a small section of code, you can use with-layout. It works just like layout, but it only affects the code nested inside it.

// with-layout() for a nested code block:
+with-layout(5 1/4 fluid show background)
  .grid
    +container

  .grid__item
    +gallery(1)