干货分享：如何更好地使用栅格系统

印刷中也会用到栅格，但就本文而言，我主要想讨论的是用于PC和移动设备上的栅格系统设计。

紫色块放内容

内容块包括文本，图片或者是两者的组合形式，背景颜色实际上不能算是内容元素，除非是作为文本或者图片的容器。

上图中的粉色块作为栅格中的列，它们构成了内容宽度。一般来说，列宽是不会变的，只是列数会随着设备的不同而变化，比如从PC端的12列变为平板电脑上的8列，然后在移动端变为4列。严格来说，你其实可以定义任何想要的列宽，但大多数情况下的网格列宽都设置在60-80px之间。选择合适的列宽是最重要的，因为它是内容宽度的主要决定因素。

水槽是在列与列之间的空间。20px是一个常见的尺寸设置，当设计块状或者卡片元素的网格时，这种间距非常重要，比如做照片类设计的时候。有些系统会随着设备宽度的增加而增加水槽的宽度，但也可以保持固定。

外边距也称为外水槽，是内容宽度之外的空白区域。为了更方便的设计，外边距会随着设备宽度的增加而增加。移动设备的边距通常为20-30px，而在平板电脑和PC端，这个间距通常会差异很大。

下面会介绍一些基本的准则，但要明白在实际设计中其实没有任何硬性的规定。

1. 内容元素必须位于若干列上

其核心思想是内容元素必须位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的例子中，我展示了不同分割方式设计的信息卡片。

不同栅格设计展示

很棒，这看起来很简单对吧。有的时候，你想把内容严格的套用在栅格布局上，会发现可能不够美观，比如下面的例子。

如果我们把内容都放在网格上，文本内容会显得很长，最佳的位置是不严格在任何网格上，这也是可以的，只要理解了整个元素实际上是一个不可见的，更大的容器就行。

这也是4×3的布局，只是给了它内部不可见的填充。当把这样的设计稿给到开发时，他们就能很直观的知道这一点，所以这更利于去理解如何实际地分配好内容。

2. 不要将内容元素留在水槽中

内容元素应该要在列宽以内，而不能流出在水槽之外，这样会违背栅格化的目的。

3. 只要父级元素对齐栅格，子级可以不完全对齐列

有些时候，你想要将设计和卡片分成两部分，一半是图片，一半是文字。你可能遇到这样尴尬的情况，图片没有完全落在一列上，文字被迫以一种奇怪的方式自适应。其实不用担心，只要“父”容器对齐栅格，这就没有关系。

父子级内容栅格排版示意

4. 除非有意，否则不要把列作为外部填充

所有重要内容都应该与栅格列宽相适应。一开始会觉得奇怪，因为如果不习惯使用网格，可能会把网格宽度当成全部内容区域，所以还需要给它设定一定的内边距。此时外边距就起到了留白的作用，它们充当了内边距。不要在网格内部利用列宽当成内边距，而是要与网格最外面保持对齐，利用网格外的间距来当做留白区域。根据代码实现方式，要么网格内的内容按比例缩放，边距固定，要么外边距与内容同时缩放。