Susy Omega 出现正确列宽的问题

Question

尝试在 4 个不同的断点上获取正确的列宽以根据需要设置时遇到问题。

当我使用 span-columns(3, 12) 时，我希望最大尺寸的总宽度为 300 像素，每个内容之间有 20 像素的填充。我试图用数学方法来设置每列的宽度，但它没有按预期工作。

我的一些代码是：

$total-columns: 12;
$column-width: 86.666667px;
$gutter-width: 20px;
$grid-padding: 20px;
$container-width: 1300px;
$container-syle: static;

使用 (3, 12) 我的内容块的宽度为 295 像素。我怎样才能让它总大小达到 300 像素？

Answer 1

如果您想根据列宽进行数学运算，则应删除 $container-width 覆盖。那么数学就很简单了：

3 * $column-width + 2 * $gutter-width = 300px

该等式有许多可能的解决方案，具体取决于您想要的排水沟大小。显然你已经这样做了：

3 * 86.666666667px + 2 * 20 ~= 300px

或者...

3 * 90px + 2 * 15px = 300px

等等。当前设置的唯一问题是您正在用自己的$container-width 覆盖列输出数学。