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

Question

我正在尝试用一个主容器和一个侧边栏进行奇点布局。在主容器中，我希望有一个浮动元素的列表，这些元素将在每个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和@的样式项包括float-span()
5. 为行中的最后一项指定last，以避免意外的换行

代码的关键部分是：

#main{@包括网格跨度(9，1)；背景：黄色；@包含布局(9){.项目{&：第n个孩子(3n+2){@包括浮动跨度(3,1)；背景：蓝色；}&：第n个子(3n+0){@包括浮动跨度(3,1)；背景：红色；}&：第n个子(3n+1){@包括浮动跨度(3，最后)；背景：绿色；}}}}