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

Question

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

以下是相关要点： 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一行中的最后一项以避免意外的换行符。

代码的关键部分是：

＃主要的 {
  @include 网格跨度（9,1）；
  背景：黄色；

  @include 布局（9）{
    。物品 {
        &:nth-child(3n+2) {
          @include 浮动跨度（3,1）；
          背景：蓝色；
        }
        &:nth-child(3n+0) {
          @include 浮动跨度（3,1）；
          背景：红色；
        }
        &:nth-child(3n+1) {
          @include 浮动跨度（3，最后一个）；
          背景：绿色；
        }
    }
  }
}