布局填充中的Singularitygs布局

Question

我使用的是两个网格跨度的主要布局，用作内容和右侧面板。然后，在内容中，我有三个网格跨度，即相等的列。像这样： 1.父母跨度：6和6 2.第一列的子跨度：4和4和4

当我使用grid-span作为内容3列时，会发生这种情况，然后它们都有填充，所有这三个，并且最后一列的填充在视觉上添加到父容器的填充以创建一个double排水沟。

但是，当我使用float-span时，我们三个内容列中的最后一个没有填充，并且看起来比前两列长得多。

有没有办法让所有3个子列的大小相同，并且第三列没有填充，而不必使用css覆盖破解奇异性？

Answer 1

这就是奇点的固定排水沟的工作原理。

要将背景应用于列而不包括其填充，请使用子容器。

请参阅此演示：http://sassmeister.com/gist/b2d957171427022de7c7

PS 不要嵌套您的Sass代码。使用语义类直接处理元素。使用两级深度来定位父母中的孩子，例如： G：

.parent
  .child-1
    +grid-span(1,1)
  .child-1
    +grid-span(1,2)

永远不要使用三级深度，除非你有一个非常好的理由。