sass - 使用网格跨度与正确布局和背景网格嵌套列

Question

大家好，

我一直在研究 Singularity 网格框架，到目前为止我真的很喜欢它的简单性和概念/心理模型。但是，像其他人一样，我仍然对如何在 Singularity 中正确地进行嵌套网格感到有些困惑。在查看了类似的问题后：

• 仍然对嵌套网格感到困惑
• 具有浮动方法和填充的子网格
• 必须重新声明全局上下文？

我想出了以下示例来创建嵌套网格：一个仅使用grid-span，另一个使用layoutand grid-span：

• 使用网格跨度的奇点嵌套列
• 使用 layout+grid-span 的奇点嵌套列

如您所见，尽管使用该layout方法感觉更好，但它们达到了相同的最终结果。考虑到这一点，我的问题是 2 倍：

1. 是否有创建具有奇点的嵌套网格的“最佳/推荐实践”？

2. 为什么使用vs.background-grid时在相同元素上绘制的网格不同？似乎嵌套列的创建方式不同，因此具有不同的“内部”列？使用的背景网格似乎更正确，尽管有些元素看起来不正确（例如，“第一个”元素在其中绘制了 10 列，而它只跨越了父容器的 8 列，而“a”和“b” " 元素在其中绘制了 6 列，尽管它们仅跨越父容器的 3 列）。grid-spanlayoutlayoutbackground-gridbackground-grid

   如果我误解了奇点的一些简单概念，我提前道歉。事实上，这很可能;)

   提前感谢您的帮助。

和平

Answer 1

layout用于嵌套很多东西的时候。您只需指定一次上下文，然后您就可以在该嵌套上下文中嵌套子元素。

grid-span提供一次性上下文分配。它用于嵌套单个元素。

如果您需要background-grid在嵌套上下文中使用，您应该使用layout并且它应该标识正确的上下文。background-grid容易出现舍入错误，尤其是在基于 webkit 的浏览器中，并且指南可能略有偏差。