Sass 使用“容器”时显示网格的奇点网格系统

我有一个奇点布局，将填充放在“容器”的任一侧，如奇点问题中所述：

这样做的基本要求是两边都有一个间隙，这样在较小的屏幕上就可以看到缓冲效果

我不明白的是，在开发时，我会使用@include背景网格显示网格的元素

如果我把它放在.container上，那么网格将显示在padding下面，而padding实际上不是网格的一部分。当然，我可以在其中创建一个元素，但该元素纯粹用于可视化开发目的，因此在关闭网格显示后是多余的

您可以在下图中看到黑线是如何延伸到其父容器的边缘的，但网格超出了这一点

---

所以，您可以使用填充将水槽添加到容器中。背景恰好延伸到填充水槽，所以你的网格关闭了

正面解决方案是使用分包商。将填充物涂抹到外部容器上。将clearfix和网格背景应用于内部容器

---

背景剪辑：内容框确实是一个更好的解决方案。在IE8中，你不需要调试网格背景。

这个问题仍然存在吗？@lolmaus AndreyMikhaylov是的，尽管我认为你可以使用Susy所做的背景剪辑：内容框。

.container {
  // Sets a max width. Site will be fluid until it reaches 960px, then stick there.
  max-width: 960px;
  // Centers the container.
  margin: 0 auto;
  // Sets padding equal to a gutter.
  padding-left: gutter-span();
  padding-right: gutter-span();
  // Might as well clearfix it as well.
  @include clearfix;
}