使用 Susy 插入流体网格

Question

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

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

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

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

谢谢！

Answer 1

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

您可以通过多种方式来实现您的布局，但我将您的 sassmeister 要点分叉为显示 how I might do it。在我的解决方案中，顶行两边都有2.5-column 边距，留下8 列的上下文。底行两边都有1-column 边距，留下11 列的上下文。