Susy 2 Grid in Grid

Question

I have the following grids defined:

$main-grid: 12 (remCalc(62.4166667px) remCalc(20px)) after static float
$twelve-fluid: 12 remCalc(15px) after fluid float

+set-grid($main-grid)

The $main-grid is being set on my .container . I wish the $twelve-grid to be set on a child of .container called .container__main so I have the following:

+use-grid($twelve-fluid)
  .container__main
    +rem(padding, 20px)
    background-color: #ffffff
    +background-image(linear-gradient(top, #c4c3b1, #ffffff remCalc(30px)))
    +background-image(linear-gradient(top, #c4c3b1, #ffffff 30px))
    +background-grid

The things that are wrong is that the grid does not fit inside the 20px (or rem equivalent) padding that .container__main has. How can I get it to adapt to that so the grid of 12 fluid columns fits inside.

I also tried replacing +background-grid with +overlay-grid but I don't seem to get any output whatsoever?

The rem pixel width fallbacks are still not showing up. Is this in the pipeline? (Not rushing, just so I know).

Any ideas?

Answer 1

Add background-origin and -clip. Those will be added automatically in the next pre-release, but for now you have to add them by hand:

.container__main
  +background-origin(content-box)
  +background-clip(content-box)

That will clip your other backgrounds as well, so you could wrap it in a mixin. Something like this:

@mixin show-grid($show: $show-grids)
  @if $show and $show != hide
    +background-grid
    +background-origin(content-box)
    +background-clip(content-box)

.container__main
  +show-grid

That's just a temporary workaround - part of using the alpha. We already have it fixed in the susy-next branch, and we'll have it out in a new gem very soon.