Susy网格和上下文

Question

我没有找到关于在mixin @include span-columns();中使用上下文的明确说明，所以我找不到@include span-columns(4 , $tablet)之间的差异;和@include span-columns(4);但我觉得这对我来说是一个问题，因为列不会发生在父容器的整个宽度上，如下所示：

在这个例子中，第二列应该使用8 col而不是4。 我正确的方式吗？我是否需要正确使用上下文？

感谢

Answer 1

由于Susy网格是相对的，因此父级的宽度用于计算子级的宽度。简而言之：4/4 = 100%，4/8 = 50%，4/4 != 4/8。可以将分数中的第一个数字视为要跨越的列，然后将第二个数字视为可用的列（父级的宽度或上下文）。

查看your demo linked from another question和您的屏幕截图，您在平板电脑视图的8上下文中，以及桌面视图中的12。这意味着平板电脑左栏上的span-columns(2, 8)在桌面上变为span-columns(4, 12)。主要内容的span-columns(6 omega, 8)变为span-columns(8 omega, 12)。 omega对于连续的最后一项非常重要。

此外，您需要删除在两个对象上设置的padding，或使用box-sizing: border-box。默认情况下，浏览器会将填充添加到宽度，因此您的网格项目对于空间来说太宽了。我建议您设置border-box globally。