如何为 12 列 Susy 网格指定 2.5% 的间距

Question

我有一个具有两种不同网格设置的移动优先网站。直到 600px:

$sm-screen-grid: (
  columns: 5,
  gutters: 1 / 3
);

那些间距显示为 2.5% 的填充，仍在尝试弄清楚具体是如何计算的。 600 之后，我切换到 12 列网格。我的问题是我希望装订线宽度仍为 2.5%。我似乎无法弄清楚要为排水沟指定什么值，所以它呈现为：

padding-left: 2.5%;
padding-right: 2.5%;

一个容器。

有什么建议吗？

Answer 1

Susy 的数学根据 gutter-position 的不同而变化。根据该输出，我猜您正在使用 inside 设置。该数学看起来像：

// target-width / context-width * 100%
$single-gutter: $gutters / ($columns + ($gutters * $columns)) * 100%;

在您的情况下，该等式的结果是 5%，它被分为左右填充 – 2.5%。据我所知，12 列网格需要将间距设置为 1.5 才能获得相同的结果。这意味着，为了保持精确 2.5%，您的间距将大于您的列。

请记住，百分比填充是根据包含元素计算的，而不是被填充的元素。所以保持 % 相同不会保持列与排水沟的比率相同。如果您试图让列的间距始终为 2.5%，则应将间距设置更改为 .25 并将其保留在那里。百分比输出将发生变化，但列与间距的比率将与任何数量的列保持相同。

How to specify 2.5% gutters for a 12 Column Susy Grid