layout - 布局填充中的 Singularitygs 布局

Question

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

发生的情况是，当我对内容 3 列使用 grid-span 时，它们都有填充，所有三个，最后一列的填充在视觉上添加到父容器的填充以创建双装订线。

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

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

Answer 1

这就是 Singularity 的固定排水沟首先是如何工作的。

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

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

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

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

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