|
印刷中也会用到栅格，但就本文而言，我主要想讨论的是用于PC和移动设备上的栅格系统设计。 紫色块放内容
内容块包括文本，图片或者是两者的组合形式，背景颜色实际上不能算是内容元素，除非是作为文本或者图片的容器。 上图中的粉色块作为栅格中的列，它们构成了内容宽度。一般来说，列宽是不会变的，只是列数会随着设备的不同而变化，比如从PC端的12列变为平板电脑上的8列，然后在移动端变为4列。严格来说，你其实可以定义任何想要的列宽，但大多数情况下的网格列宽都设置在60-80px之间。选择合适的列宽是最重要的，因为它是内容宽度的主要决定因素。 水槽是在列与列之间的空间。20px是一个常见的尺寸设置，当设计块状或者卡片元素的网格时，这种间距非常重要，比如做照片类设计的时候。有些系统会随着设备宽度的增加而增加水槽的宽度，但也可以保持固定。 外边距也称为外水槽，是内容宽度之外的空白区域。为了更方便的设计，外边距会随着设备宽度的增加而增加。移动设备的边距通常为20-30px，而在平板电脑和PC端，这个间距通常会差异很大。 下面会介绍一些基本的准则，但要明白在实际设计中其实没有任何硬性的规定。
1. 内容元素必须位于若干列上其核心思想是内容元素必须位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的例子中，我展示了不同分割方式设计的信息卡片。 不同栅格设计展示
很棒，这看起来很简单对吧。有的时候，你想把内容严格的套用在栅格布局上，会发现可能不够美观，比如下面的例子。 如果我们把内容都放在网格上，文本内容会显得很长，最佳的位置是不严格在任何网格上，这也是可以的，只要理解了整个元素实际上是一个不可见的，更大的容器就行。 这也是4×3的布局，只是给了它内部不可见的填充。当把这样的设计稿给到开发时，他们就能很直观的知道这一点，所以这更利于去理解如何实际地分配好内容。
2. 不要将内容元素留在水槽中内容元素应该要在列宽以内，而不能流出在水槽之外，这样会违背栅格化的目的。
3. 只要父级元素对齐栅格，子级可以不完全对齐列有些时候，你想要将设计和卡片分成两部分，一半是图片，一半是文字。你可能遇到这样尴尬的情况，图片没有完全落在一列上，文字被迫以一种奇怪的方式自适应。其实不用担心，只要“父”容器对齐栅格，这就没有关系。 父子级内容栅格排版示意
4. 除非有意，否则不要把列作为外部填充所有重要内容都应该与栅格列宽相适应。一开始会觉得奇怪，因为如果不习惯使用网格，可能会把网格宽度当成全部内容区域，所以还需要给它设定一定的内边距。此时外边距就起到了留白的作用，它们充当了内边距。不要在网格内部利用列宽当成内边距，而是要与网格最外面保持对齐，利用网格外的间距来当做留白区域。根据代码实现方式，要么网格内的内容按比例缩放，边距固定，要么外边距与内容同时缩放。
| 
