susy-sass - 使用 Susy 插入流体网格

Question

我已经能够math: static毫无问题地复制以下网格布局。但是，我更喜欢使用流体宽度，因此在下一个断点更改之前，设计会在较小的屏幕上缩小。

当我切换到math: fluid并尝试使用margin-leftor插入行时， padding-left% 宽度缩小并且网格不再正确对齐 - 每个块的大小不同。

这可能与流体网格有关吗？百分比似乎不可能，但是其他单位呢？我很惊讶边距/填充对百分比宽度产生了影响，因为box-sizing: border-box我假设它们在“可见”尺寸之内。

该问题的演示位于http://sassmeister.com/gist/83526e7319203138ace1

谢谢！

Answer 1

是的，这是可能的。您当前的问题来自对contextSusy 的误解。无论您使用何种尺寸的盒子，%宽度都是相对于可用空间的。如果您删除空间（在父元素上带有边距或填充），则需要将该新上下文传递给子元素。所以你的块并不都在同一个上下文中，也没有一个块在13你现在传入的列的完整根上下文中。

您可以通过多种方式来实现您的布局，但我分叉了您的 sassmeister gist 以展示我如何做到这一点。在我的解决方案中，顶行2.5-column的两边都有边距，留下了8列的上下文。底行1-column的两边都有边距，留下列的上下文11。