CSS 网格系统偏移列等

Question

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

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

Answer 1

您可能已经遇到过，有这么多不同的网格和 CSS 框架，这可能有点令人困惑，所以我会尽力提供帮助。

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

计算网格可能很复杂，并且与添加间距、偏移量、边距、嵌套、容器等相结合时，您的 CSS 很快就会变得相当困惑。

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

希望这对您有所帮助。