Search code examples
cssgridsasssusy-compass

Susy Grid not getting Grid Padding

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?

Solution

  • 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