CSS 网格框架中的排水沟有什么意义?

2022-01-18 00:00:00 grid css blueprint-css

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

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.

  1. 排水沟有什么意义?当然，它们不习惯在列之间包含空格，因为您可以为此使用 margin CSS 属性，对吗?或者排水沟只是管理利润的一种优雅方式?
  2. 我不希望列之间有任何空间，并希望生成一个不包含装订线的网格布局，但所有生成器工具都阻止我使用零宽度装订线.这是为什么呢?
  3. 似乎不再支持建议的蓝图 CSS 生成器.谁能推荐一个蓝图 CSS 生成器来修改网格以包含零宽度排水沟?
  1. 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?
  2. 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?
  3. It appears the suggested Blueprint CSS generator is no longer supported. Can anyone suggest a Blueprint CSS generator for modifying the grid to include zero-width gutters?

非常感谢您的智慧！

推荐答案

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

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 一点也不复杂.

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.

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

It should be very straight forward to do a no-gutter grid without a generator. e.g.

( 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...

相关文章