Neat 2.x 中的全宽、50/50 布局？答案

【问题标题】：Full width, 50/50 layout in Neat 2.x?Neat 2.x 中的全宽、50/50 布局？
【发布时间】：2017-10-15 10:16:04
【问题描述】：

我正在尝试使用 Bourbon Neat 2.x 实现 50/50 的面板布局，其中左侧面板将具有背景色，但网格边距给我带来了一些问题。

我最初只是将标准 grid-container 作为父级，两个 div 使用 @include grid-column(6) 混合。麻烦的是，在网格的左侧和右侧留下了一个边距，所以 50% 背景颜色面板不能正常工作。

然后我尝试添加grid-collapse mixin 以尝试摆脱边距（codepen example），但这似乎具有使页面> 100％宽度的效果，从而导致用户水平滚动.

有没有一种简单的方法来实现这种布局，或者我应该为没有边距的面板使用自定义网格定义？

【问题讨论】：

标签： css neat

【解决方案1】：

Neat 可以覆盖这个用例，但它需要更多的 html。诀窍是具有grid-collapse 类的对象（在您的示例中为.container）需要一个带有width: 100%; overflow: hidden; 的包装器。

这里有一个问题也可以回答这个问题 → Remove outside gutters in Neat 2

【讨论】：