浮动元素的宽度小于网格列

Question

我正在尝试使用主容器和侧边栏进行Singularity布局。在主容器中，我想要一个浮动元素列表，每个元素都会有换行符。

这是相关的要点： http://sassbin.beta.caliper.pl/gist/8704970/

不幸的是宽度（1）+宽度（2）+宽度（3）！=宽度（主要）。我究竟做错了什么？我必须为项目1..N使用网格，因为它们需要对齐页面标题中的元素（不包含在要点中）。

Answer 1

因此，在以新的心态接近主题后，我设法获得了预期的定位。

以下是每个人要比较的新要点： http://sassbin.beta.caliper.pl/gist/8900975/

有些事情需要改变：

1. 添加body { margin: 0 }以使@include background-grid()可视化与行为一致。
2. 删除所有边框并将其替换为背景以消除1px差异。
3. 使用@include layout()更改项目容器内的网格，以匹配容器的网格范围。
4. 使用nth-child和@include float-span()设置项目。
5. 为行中的最后一项指定last，以避免意外换行。

代码的关键部分是：

#main {
  @include grid-span(9,1);
  background: yellow;

  @include layout(9) {
    .item {
        &:nth-child(3n+2) {
          @include float-span(3,1);
          background: blue;
        }
        &:nth-child(3n+0) {
          @include float-span(3,1);
          background: red;
        }
        &:nth-child(3n+1) {
          @include float-span(3,last);
          background: green;
        }
    }
  }
}