CSS 基线之道：网页设计布局之垂直网格设计

网页设计布局中一直比较流行网格对齐，但只是针对水平的对齐，很少或者没有涉及

垂直对齐，这篇文章很详细的讲解了垂直网格，乃至基线对其的相关，而

css3 中的多列布

局的也使其显得更为重要，因此还是很有必要去了解学习，至少也是一种思路。

这或许是因为缺少基线网格的理解和欣赏，更或者是因为基线网格是出了名的难以实

现，

迄今为止还没有人拿着蓝图让它成功实现。有些人甚至认为基线在网络上是多余的，

基线作为一种排版术语和网络上的行为，在网络上遵循的规则有别于用于印刷的，

line-

height 和真正的行距之间令人沮丧的差异就是最明显的例子。目前，无论怎样，让我们先
假设基线至少在某种程度上对于来说网页设计师是一种有用的工具。但是它到底是什么样的
一种工具，在我们手上有什么可以自由使用的

工具来实现它，并且最重要的是，这到底值

不值得。

垂直网格和模式识别在数学计算和为实现基线对齐而进行将在的轻移之前，不妨来

了解其根本的本质：垂直网格。在了

解为什么的同时，也就有了很好的准备和更大的动力

来着手解决怎样去实现基线对齐，这个有时让人沉闷而又着迷的问题。

垂直网格，可以简

单的理解为涉及到结构高度和垂直排列元素之间的间距，或许更为普遍点来说是内边距
（

padding），外边距（margin）和行高（line-height）。正如水平网格通过一个预设的单元

尺寸约束布局而达到整齐和谐的效果一样，垂直网格也在用户下滚的时候通过一致的，可
预测的措

施提供固定结构的内容。

找互联网资料，就到一览互联网文库