栅格系统在网站设计中可以说是经常使用的，很多人经常听说栅格系统，但重来没弄懂过，今天翼好建站的小编就整理一下这些看的经验给大家讲一下栅格系统的使用。
今天我们主要想讨论的是用于PC和移动设备上的栅格系统设计。
一、色块放内容
内容包括了文本和图片，或者图片文字组合。背景颜色不算内容。
粉色的是列，他们构成了宽度。只是列数会随着设备的不同而变化。比如从PC端的12列变为平板电脑上的8列，然后在移动端变为4列。
你其实可以定义任何想要的列宽，一般网格列宽是在60-80px之间。但是这个列宽不是规定死的，合适的列宽是最重要的。
水槽的是列与列之间的距离。一般设置在20PX。当设计块状时，这种间距非常重要，比如做照片类设计的时候。有些系统会随着设备宽度的增加而增加水槽的宽度，但也可以保持固定。
外边距也叫外水槽，是内容宽度之外的空白区域。外边距会随着设备宽度的增加而增加。移动设备的边距通常为20-30px，而在平板电脑和PC端，这个间距通常会差异很大。
下面介绍网站设计中栅格系统的使用基本准则
二、内容元素必须位于若干列上
重要内容必须在若干列上，你可以随便分割，比如，6×2,3×4,4×3。我展示了不同分割方式设计的信息卡片，有的时候，你想把内容严格的套用在栅格布局上，会发现可能不够美观，比如下面的例子。
三、不要将内容元素留在水槽中
内容元素应该要在列宽以内，而不能流出在水槽之外，这样栅格化就变得没有意义了。如图：
四、只要父级元素对齐栅格，子级可以不完全对齐列。如图
上图中的一半是图片，一半是文字，图片没有完全落在一列上，文字被迫以一种奇怪的方式自适应。其实不用担心，只要「父」容器对齐栅格，这就没有关系。
五、完全出血的元素或纹理图形应该设计在画板边缘，并理解为出血的列网格
这个页面布局的顶部图片被设计成完全出血
如图：