css - 苏西 : Fluid grid based on maximum px values

Question

我正在尝试制作一个流体网格，其最大宽度具有以下值:

http://gridcalculator.dk/#/1224/12/40/56

当浏览器的大小调整到 1264 像素以下(以允许在主体上留出 20 像素的内边距)时，所有内容(边距、间距和列)都应按比例缩小。这可能吗？

我尝试过这些方法:

第一次尝试:

$total-columns  : 12;
$column-width   : 56px;
$gutter-width   : 40px;
$grid-padding   : 56px;

这不起作用，因为内边距固定为 56 像素并且不会缩小。

第二次尝试:

$total-columns  : 12;
$column-width   : 4.575163%;
$gutter-width   : 3.267973%;
$grid-padding   : 4.575163%;

$container-width: 1224px;

这几乎可以工作，但出于某种原因网格填充大于列宽......

我错过了什么？谢谢!

Answer 1

Susy 1.0 处理网格填充的方式不同于列和间距。为了实现您正在寻找的东西，我们必须在一行中的第一个和最后一个元素上都需要特殊的类。这就是 Susy 0.9 的工作原理，但它为大多数人提示的功能增加了很多复杂性。现在，将网格填充添加到容器而不是元素，你想要的是不可能的。

网格填充现在直接添加到容器中，无需任何数学运算。在您的第一个示例中，这意味着它不会 flex 。在您的第二个示例中，浏览器将其解释为整个视口(viewport)的百分比，而装订线是容器的百分比，因此导致宽度不同。