我相信网上对栅格系统的讲解一大把一大把，我只是把自己对栅格系统的认知给大家讲解一下而已，如果你是位大佬级的人物请喷~

栅格系统我们来看下百度百科的定义吧：

以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

栅格系统对于一个网页来说：一个网页不可能只有一种栅格来辅助的，有一个网页就有多种栅格来辅助~

对于栅格系统的计算百度百科给出的:

W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W

这也比较官方的撒。

而我自己也有计算的方法：

网格宽度=内容宽度+1个列间距（水槽）

总宽度=（列数*列宽）+（列数*列间距）

网页宽度不是固定的，网格栅格的间距也不是固定的，分栏有三等分、四等分、五等分、六等分的，所以在一个复杂网页的设计中，可能需要建立多个不同的网格系统辅助。

如果需要满足三、四列等分布局，则3*4=12列的网格就可以搞定，如果需要四、五等分的，则可以用4*5=20列的网格布局。

来举几个列子吧：

站酷

在1920px的分辨率下内容的宽度是1380px，五等分，间隔是20px。那么网格可以选择10/15/20的分列，用网格布局的时候，网格的宽度=内容宽度+1个列间距，设计的时候总宽度为1380+20=1400px，只有分为10列的时候，每一列的宽度为120px是整数，分为15列和20列，每一列的宽度都是小数。总宽度=（列数*列宽+列数*列间距），所以1400=（10*120+10*20）。如图所示：

当然站酷是不是这样布局的，我也不知道撒~

再举一些列子来验证一下。

Pixelify

Pixelify，内容宽度是1004px，间隔是16px，则页面总宽度为1024px，分了四列，则可以选择3的倍数的网格，可以分为12列。1024=（12*69+12*16），如图所示：

如果设置了宽度是1200px，间距是20px，则页面的内容宽度是1180px。如果需要12等分，则1180px=（12*80+20*（12-1）），每个栅格的宽度是80px。12列的栅格满足大部分比例关系，而且设置间隔为20px，12等分、16等分、20等分的网格，每一列都是整数。

比如UI中国的首页:

根据以上案例的反推，可以得到一个网格布局大致的规律。

总宽度=内容宽度+一个列间距。

根据网页布局的等分比例，设置一个可以整除的网格列数，比如四等分，可以设置12列、16列、20列的，越复杂的网页，需要设置更多的列数，或者不同的地方，使用不同的网格布局。

然后设置好间隔值，最后每一列的宽度算出来是整数最好。

弄着篇文章，我参考了很多大佬级的案列，这里感谢@赵老师，是她的文章感悟了我~

最后，谢谢大家的观看，有什么观点可以直说哦~