Susy Grid没有获得Grid Padding

Question

我正在尝试在.fat元素的主网格中添加另一个网格。我的代码是：

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

一切正常，但网格的左右两侧没有10px的填充。

有什么想法吗？

Answer 1

在这种情况下，您必须自己添加实际的填充。由于网格背景是流动的（基于%）并且网格填充可以使用任何单位，因此网格填充不会在背景图像中计算。相反，我们使用background-origin和background-clip将图片限制在content框内。

此外，在这种情况下，由于您实际上并未在任何位置设置宽度，因此您不需要$container-width设置。这就是你需要的：

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