使用Susy插入流体网格

Question

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

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

这可能与流体网格有关吗？用百分比看似不可能，但其他单位呢？我很惊讶边缘/填充对％宽度产生了影响，因为使用box-sizing: border-box我认为它们位于＆＃39;看到＆＃39;大小

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

谢谢！

Answer 1

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

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