Susy Grid not getting Grid Padding

Question

I am trying to add another grid inside my main grid on an element of .fat . My code is:

footer
  .fat
    $container-width: 100%
    +with-grid-settings($columns: 8, $padding: 10px)
      +susy-grid-background

It's all working however, there is no 10px of padding on the left and right of the grid.

Any ideas?

Answer 1

In this case you'll have to add the actual padding yourself. Since grid backgrounds are fluid ( % -based) and grid-padding can use any units, the grid-padding is not factored into the background image. Instead, we use background-origin and background-clip to confine the image inside the content box.

Also, in this case, since you are not actually setting the width anywhere, you don't need a $container-width setting. Here's what you need:

footer
  .fat
    +with-grid-settings($columns: 8, $padding: 10px)
      +susy-grid-background
      padding: 0 $grid-padding