CSS 网格框架中的排水沟有什么意义？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5331912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the point of gutters in CSS grid frameworks?
提问by BeachRunnerFred
I'm diving into web development and I'm playing with the Blueprint CSS framework, which includes a grid system, and I have a few questions.
我正在研究 Web 开发，并且正在使用 Blueprint CSS 框架，其中包括一个网格系统，我有几个问题。
- What's the point of gutters? Surely they're not used to include space between the columns because you can just use the margin CSS property for that, right? Or are gutters just an elegant way to manage margins?
- I don't want any space between my columns and would like to generate a grid layout that doesn't include gutters, but all the generator tools prevent me from having zero-width gutters. Why is that?
- It appears the suggested Blueprint CSS generatoris no longer supported. Can anyone suggest a Blueprint CSS generator for modifying the grid to include zero-width gutters?
- 天沟有什么用？当然，它们不用于在列之间包含空格，因为您可以为此使用 margin CSS 属性，对吗？或者排水沟只是管理利润的一种优雅方式？
- 我不希望我的列之间有任何空间，并希望生成不包含装订线的网格布局，但所有生成器工具都阻止我使用零宽度装订线。这是为什么？
- 似乎不再支持建议的蓝图 CSS 生成器。任何人都可以建议一个蓝图 CSS 生成器来修改网格以包含零宽度排水沟？
Thanks so much for your wisdom!
非常感谢你的智慧！
采纳答案by Chris Bentley
The motivation behind a CSS Grid system is to completely automate layout. Gutters are usually desirable because white space between columns makes for better legibility so it makes sense to include them as part of the automation.
CSS Grid 系统背后的动机是完全自动化布局。装订线通常是可取的，因为列之间的空白可以提高可读性，因此将它们作为自动化的一部分是有意义的。
A Generator's raison d'être is to relieve you of the slightly tedious calculations necessary to implement them but without the gutters both the math and the css isn't at all complicated.
Generator 的存在理由是让您免于实现它们所需的略显乏味的计算，但没有排水沟，数学和 css 都一点也不复杂。
It should be very straight forward to do a no-gutter grid without a generator. e.g.
在没有发电机的情况下制作无排水沟网格应该非常简单。例如
( column width X no 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...
回答by Matt Howell
Gutters have absolutely nothing to do with CSS per se. They're a design concept from print publishing -- they're meant to provide whitespace between columns, making the content easier to read.
排水沟与 CSS 本身完全无关。它们是来自印刷出版的设计概念——它们旨在提供列之间的空白，使内容更易于阅读。
Columns without gutters are very easy to calculate. Just set the same width in pixels to each column.
没有装订线的列很容易计算。只需为每列设置相同的像素宽度即可。
