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

【问题标题】：Singularity Grid System showing the grid when using a 'container'使用“容器”时显示网格的奇点网格系统
【发布时间】：2014-07-31 12:51:06
【问题描述】：

我有一个 Singularity 布局，可以在“容器”的任一侧进行填充，就像这里的 Singularity 问题中提出的那样：https://github.com/Team-Sass/Singularity/issues/91

.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;
}

这样做的基本要求是两边都有一个间隙，以便在较小的屏幕上看起来有缓冲。

我不明白的是，在开发过程中我会使用@include background-grid 显示网格的哪个元素。

如果我把它放在.container 上，那么网格将显示在填充下方，这实际上并不是网格的一部分。当然，我可以在其中创建一个元素，但该元素纯粹是出于视觉开发目的，因此一旦我关闭网格显示就多余了。

您可以在下图中看到黑线是如何延伸到其父级 .container 的边缘的，但网格会超出此范围。

【问题讨论】：

这个问题仍然存在吗？
@lolmaus-AndreyMikhaylov 是的，虽然我认为你可以使用 background-clip: content-box，这是 Susy 所做的。

标签： sass grid-layout singularitygs

【解决方案1】：

因此，您使用填充将排水沟添加到容器。背景恰好延伸到填充排水沟，因此您的网格已关闭。

正面解决方案是使用子容器。将填充物应用于外部容器。将 clearfix 和网格背景应用于内部容器。

background-clip: content-box 确实是一个更好的解决方案。无论如何，您不需要在 IE8 中调试网格背景。

【讨论】：