css - Susy Grid 没有得到网格填充

Question

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

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

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

有任何想法吗？

Answer 1

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

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

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