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

Question

总而言之，

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

• Still confused with nested grids
• Subgrid with floating method and padding
• Having to re-declare global context?

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

• Singularity nested columns using grid-span
• Singularity nested columns using layout+grid-span

你可以看到他们达到了相同的最终结果，尽管使用layout方法感觉更好。考虑到这一点，我的问题是2折：

1. 是否有使用Singularity创建嵌套网格的“最佳/推荐做法”

2. 使用background-grid与grid-span时，为什么layout在相同元素上绘制的网格不同？似乎嵌套列的创建方式不同，因此具有不同的“内部”列？使用layout的背景网格似乎更正确，但即使有些元素看起来不正确（例如“{first”元素在background-grid绘制的内部有10列，而它只跨越父列的8列容器，“a”和“b”元素有{6}列在其中的background-grid，但它们只跨越父容器的3列。）

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

   提前感谢您的帮助。

和平

Answer 1

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

grid-span提供一次性上下文分配。这是为了嵌套一个单独的元素。

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