使用 Susy 插入流体网格
Inset fluid grids with Susy
我已经能够使用 math: static 毫无问题地复制以下网格布局。但是，我更喜欢使用流动宽度，这样在下一个断点处更改之前，设计会在较小的屏幕上缩小。
当我切换到 math: fluid 并尝试使用 margin-left 或 padding-left 插入行时，% 宽度缩小并且网格不再正确对齐 - 并且大小调整每个块的不同。
这可能与流体网格有关吗？百分比好像不行，但是其他单位呢？我很惊讶 margin/padding 对百分比宽度产生了影响，因为使用 box-sizing: border-box 我假设它们在 'seen' 尺寸内。
此问题的演示位于 http://sassmeister.com/gist/83526e7319203138ace1
谢谢！
是的，这是可能的。您当前的问题来自对 Susy 中 context 的误解。无论您使用什么框大小，% 宽度都是相对于 可用 space 的。如果您删除 space（父元素上有边距或填充），您需要将该新上下文传递给子元素。因此，您的块并不都在同一上下文中，并且 none 位于您现在传入的 13 列的完整根上下文中。
您可以通过多种方式实现您的布局，但我将您的 sassmeister 要点分叉以显示 how I might do it。在我的解决方案中，顶行的两边都有 2.5-column 个边距，留下 8 列的上下文。底行两边都有 1-column 个边距，留下 11 列的上下文。
我已经能够使用 math: static 毫无问题地复制以下网格布局。但是，我更喜欢使用流动宽度，这样在下一个断点处更改之前，设计会在较小的屏幕上缩小。
当我切换到 math: fluid 并尝试使用 margin-left 或 padding-left 插入行时，% 宽度缩小并且网格不再正确对齐 - 并且大小调整每个块的不同。
这可能与流体网格有关吗？百分比好像不行，但是其他单位呢？我很惊讶 margin/padding 对百分比宽度产生了影响，因为使用 box-sizing: border-box 我假设它们在 'seen' 尺寸内。
此问题的演示位于 http://sassmeister.com/gist/83526e7319203138ace1
谢谢！
是的，这是可能的。您当前的问题来自对 Susy 中 context 的误解。无论您使用什么框大小，% 宽度都是相对于 可用 space 的。如果您删除 space（父元素上有边距或填充），您需要将该新上下文传递给子元素。因此，您的块并不都在同一上下文中，并且 none 位于您现在传入的 13 列的完整根上下文中。
您可以通过多种方式实现您的布局，但我将您的 sassmeister 要点分叉以显示 how I might do it。在我的解决方案中，顶行的两边都有 2.5-column 个边距，留下 8 列的上下文。底行两边都有 1-column 个边距，留下 11 列的上下文。