CSS 网格框架中的排水沟有什么意义？答案

【问题标题】：What's the point of gutters in CSS grid frameworks?CSS 网格框架中的排水沟有什么意义？
【发布时间】：2011-07-16 22:59:19
【问题描述】：

我正在研究 Web 开发，我正在使用包含网格系统的 Blueprint CSS 框架，我有几个问题。

排水沟有什么意义？当然，它们不习惯在列之间包含空格，因为您可以为此使用 margin CSS 属性，对吗？或者排水沟只是管理利润的一种优雅方式？
我不希望我的列之间有任何空间，并希望生成一个不包含排水沟的网格布局，但所有生成器工具都阻止我使用零宽度排水沟。这是为什么呢？
似乎不再支持the suggested Blueprint CSS generator。谁能推荐一个蓝图 CSS 生成器来修改网格以包含零宽度排水沟？

非常感谢您的智慧！

【问题讨论】：

不允许所有可能输入的生成器是我不使用的。
@Radek S，也就是说你不使用生成器？
我不太确定，但我认为排水沟是列之间的静态空间。我的意思是，与与列本身相关的边距不同，排水沟是一个静止的物体（或黑洞或间隙），它正确地定义了相邻列之间的布局良好的距离。

标签： css grid blueprint-css

【解决方案1】：

CSS Grid 系统背后的动机是完全自动化布局。排水沟通常是可取的，因为列之间的空白可以提高可读性，因此将它们作为自动化的一部分包含在内是有意义的。

生成器存在的理由是让您摆脱实现它们所需的稍微繁琐的计算，但没有排水沟，数学和 css 一点也不复杂。

在没有发电机的情况下制作无排水沟网格应该非常简单。例如

( column width X nº of columns ) + left margin + right margin = content width

.span-1 {width:100px}
.span-2 {width:200px}
.span-3 {width:300px}
.span-4 {width:400px}

etc...

【讨论】：

我觉得这个答案并不能完全满足 op 的问题 #1。是否通过边距管理排水沟？
@E.E.33 正如 bigmattyh 所说——“Gutters 与 CSS 本身毫无关系……”。用于创建它们的 CSS 属性取决于实现者。
@ChrisBentley 谢谢！

【解决方案2】：

Gutters 与 CSS 本身毫无关系。它们是来自印刷出版的设计理念——它们旨在提供列之间的空白，使内容更易于阅读。

没有装订线的列很容易计算。只需为每列设置相同的像素宽度即可。

【讨论】：