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

你的栏目其实是正确的，背景渐变是错误的。这是一个浏览器错误。见 documentation.

Susy 列溢出网格

Susy columns overflowing grid

susy

SCSS