susy - Susy 列溢出网格

Question

我只是第一次尝试susy，但有点困难。

HTML

<div class="wrap">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col last"></div>
</div>

SCSS

@import "susy"; 

$susy: (
  container: 1140px, 
  columns: 12, 
  gutters: 0.5, 
  global-box-sizing: border-box, 
  debug: (image: show-columns)
);

@include border-box-sizing;

.wrap {
  @include container;
}

.col{
  @include span(3);
  height:40px;
  background:#f00;
  box-sizing: border-box;
}

我认为我有这个权利，但我的列出现在网格之外：

你可以在这里看到运行的代码：http: //codepen.io/EightArmsHQ/pen/Ejjxwv

如何让列完全在网格内？

Answer 1

您的列实际上是正确的，而背景渐变是错误的。这是一个浏览器错误。请参阅文档。