css - CSS网格系统偏移列等

Question

我知道你们中的大多数人可能都知道所有这些东西，但也许还有像我这样的人刚刚开始学习这些关于 CSS 网格的东西。也许这些问题也会对他们有所帮助。

1. 什么是网格系统？
2. 如何以像素和百分比计算网格系统？
3. 什么是偏移量？如何计算偏移量？
4. 使用网格系统更好吗？

Answer 1

正如您可能已经遇到的那样，有很多不同的网格和 css 框架可能会有点令人困惑，所以我会尽力提供帮助。

网格只不过是一个屏幕区域，被分割成多个部分。大多数网格通常分成 12 个组（或 12 个的倍数）。因此，对于一个 960 像素宽的容器和 12 个组（我现在将其称为列），每列的宽度为 80 像素。

计算网格可能很复杂，当与添加排水沟、偏移量、边距、嵌套、容器等结合使用时，您的 css 很快就会变得相当混乱。

有许多基于网格的 css 框架，其中最流行的两个是Twitter 的 Bootstrap和Zurb 的 Foundation。我相信这两个已经比 Blueprint CSS 和 960 grid + 其他更受欢迎，因为它们提供了广泛的插件以及脚手架层来帮助构建非常漂亮的响应式网站。

希望这可以帮助。