css - 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) 我的内容 block 的宽度为 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 覆盖 columns-out 数学。