布局填充中的 Singularitygs 布局答案

【问题标题】：Singularitygs layout in layout padding布局填充中的 Singularitygs 布局
【发布时间】：2014-06-24 15:04:43
【问题描述】：

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

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

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

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

【问题讨论】：

请在sassmeister.com 上重现该问题，更新您的帖子并附上指向它的链接，然后在 cmets 中回复。
在我的 sassmeister 中，它按预期工作 sassmeister.com/gist/7be2b0a8791bf105af54。在我的开发站点上，grid-span 为排水沟添加了填充，而不是使用边距。请参阅随附的屏幕截图。结果，最后一列（子 3）最终没有填充（因为它是最后一列）？最终比前两个更大。
您有一些样式或配置会产生不需要的填充。仔细检查你的风格。同时分享@debug $singularity的输出。
好的，成功重现。如果因为排水沟以像素为单位固定，则存在差异。请看沙盒。如果您查看开发工具中的 Child 3 绿色段落，您会发现它实际上比其他两个更宽，因为它的父列没有排在最后的装订线填充。 sassmeister.com/gist/7be2b0a8791bf105af54 - 我突出显示了列，因此您可以看到前两个有水平填充，而最后一个没有。我想没有办法解决这个问题。必须是使用固定排水沟的惩罚...
我没有发现问题。这就是固定排水沟的工作原理。

【解决方案1】：

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

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

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

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

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

【讨论】：