Susy Omega问题使列宽正确

Question

尝试在4个不同的断点上获取正确的列宽以设置为我想要的时间。

当我使用span-columns（3,12）时，我希望最大大小的总宽度为300px，每个内容之间有20px填充。我尝试用数学方法设计每列的宽度，但它没有按预期工作。

我的一些代码是：

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

使用（3,12）我的内容块的宽度为295px。我如何才能达到总计300px？

Answer 1

如果要根据列宽进行数学运算，则应删除$container-width覆盖。然后数学很简单：

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

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

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

...或

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

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