Grid 为什么ZURB基金会的行宽减少了一个沟宽？ 我用SASS基金会5。在_settings.scss中，您可以更改行和边沟的宽度。默认情况下，行设置为1000px，但如果在Photoshop中测量12列页面的宽度，它的宽度仅为970px。我还发现排水沟的宽度设置为30px

我的问题是：为什么1000px行实际上是970px宽？我一定要担心吗？或者，如果我想要1000px宽的页面，我必须将行设置为1030px？

要回答您的问题，您应该了解更多关于网格以及“边沟”是如何构造的

带有大-*类的大栅格将应用于宽度大于64.062 em~1025px的视口。在大网格上，“.row”得到：

max-width: 62.5rem; // (~1000px)
width: 100%;

因此，在大屏幕上，您的行的宽度确实是1000像素。 现在，网格列使用百分比对每行进行下潜。因此，12根大柱子的跨度为12根柱子的宽度为100%，4根大柱子的宽度为4/12=33,33%，1根大柱子的宽度为1/12=8,33%

上面的意思是大12的宽度为.row类的100%，因此大网格为62.5rem~1000像素

您可以按如下方式使前面的内容可见：

HTML:

在您的浏览器中，上图将如下图所示：

.行的长方体模型将向您显示其宽度仍为1000px：

由于列的蓝色背景色与行的黄色背景色完全重叠，因此列的宽度之和也应为1000px

现在谈谈排水沟。默认情况下，檐槽设置为：$column gotter:rem-calc30px；1.875雷姆

要构造檐沟，网格的每列每侧都有一个边距大小为1/2的填充。因此，一个大12列的宽度为1000像素，但左侧的填充为15px，右侧的填充为15px。因此，一行的宽度似乎为1000-30=970像素

通过在以前使用的HTML上应用以下SCSS代码，也可以使这些水槽可见：

.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}

现在，网格看起来如下所示：

或通过检查大12柱的箱形模型：

我的问题是：为什么1000px行实际上是970px宽？我一定要吗 担心吗

我认为你一开始就不应该担心这件事。见上文

或者，如果我想要1000px宽的页面，我必须将行设置为1030px

如果你有充分的理由这样做，你可以使用：$rowwidth:rem-calc1030；事实上，大尺寸12的盒子模型如下所示：

请注意，您还必须更改$medium断点：em-calc1024；设置为等于或大于1030px的值，以防止视口>1024且小于1030px的水平滚动条

---

或者你可以考虑删除排水沟，设置柱柱槽：0；另请参见：

我自己做了一点研究，结果表明可以使用*-collapse和*-uncollapse类删除给定屏幕大小的列水槽。更多关于这个。我还推荐构建网格系统，虽然它很古老，但它帮助我理解了这个问题。

.row {
background-color: yellow;
div {
background-color: darkblue;
}
color: white;
}

.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}