html - Susy 网格对齐有点偏离

Question

学习 Susy，爱上它。虽然在测试简单的东西时有一些怪癖。我正在尝试并排创建两个半宽列，中间有一些装订线空间，然后是一个全宽列。问题是第二个半宽列 (y) 没有完全向右浮动。如果我完全删除了 padding: 5px，那一列仍然有 1px 关闭并且不与全宽列 (z) 对齐

HTML

<div class="row">
    <div class="left">x</div>
    <div class="right">y</div>
</div>

<div class="row">
    <div class="full">
        z
    </div>
</div>

萨斯

$susy: (
     global-box-sizing: border-box,
     gutters: 1/4,
     gutter-position: outside
);

.row { 
     @include container(320px); 
}

.left {
    @include span(1 of 2);
}

.right {
    @include span(1 of 2);
    @include last;
}

.full {
    @include span(2 of 2);
}

.left,
.right,
.full {
    border: solid 1px #000;
    background: #fff;
    margin-bottom: 25px;
    padding: 5px;
 }

这是输出代码的 jsfiddle:

JSFiddle

为什么没有正确对齐？

问题可能不在于 Susy 本身，但我是否正确使用它/是否有更好的方法来做同样的事情并让它自己向右浮动？下面的代码在 .right 的同一个类中输出一个 float: left 和一个 float: right，似乎没有必要。

Answer 1

唯一的问题是由于某些原因 global-box-sizing: border-box 参数不起作用。

.full {
   @include span(2 of 2 border-box);
}

SassMeister