网页栅格系统

题记：提起网页布局，大家公认最为规范的就是栅格系统，对于高深的栅格系统，很多人可能琢磨不透，其实我们定的各种网页对齐规范，网页模块大小规范，就是来自栅格系统。本文是个人学习前辈的文章和主流网站的分析，总结的对栅格系统的理解，得出的[a+i=100]栅格布局。

（本文仅做学习交流使用，未得权威认证，欢迎大家批评指正，文末注引出处。）

栅格系统

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。最早出现于印刷，简单的说就是运用固定的格子使界面排列工整简洁。后来延续到web设计，其中比较有名的是960 Grid System。目的也无非让网页布局的更合理、易于阅读等。

使用网格系统，让你的设计具有正式感和规范感，还具有一种结构分明的设计感。这让你设计起来更轻松，对于开发者来说，同样如此。（让设计师清楚的跟其他人解释他们是如何设计的）

栅格化的基础概念

当n ＝ 24, i = 10;假如A＝40，则W＝950；假如A＝50，则W＝1190；假如A＝60，则W＝1430。

当n ＝ 24, i = 20;假如A＝50，则W＝1180；

当n ＝ 12, i = 20;假如A＝100，则W＝1180；

栅格化是通过确定等分的单位宽度以及单位宽度之间的间距，把单位宽度进行组合的一种排版方式。

首先分析等份的复杂度，如果版式仅仅是4等份、3等份的话，12列的栅格系统就可以满足需求。如果有较多不等分的可能，那么还是建议采用24列的栅格系统

栅格系统的三种形式：

1、  有边距的栅格：

当我们用已知想做的宽度的时候，可以用这种栅格

假设W=1200,i=30(10的倍数),n=12

W=(a+i)*n

1200=(a+30)*12

a=70

例如1、<人人都是产品经理>采用这种栅格，（所有内容皆在版心1200px内，图片内容块是A的倍数，多数内容间距30px，根据内容灵活应用栅格）

2、无边距的栅格

假设W=1200,i=10(10的倍数),n=12

W=(a+i)*n-i

1200+10=(a+10)*12

a约等于90

所以W=(90+10)*12-10=1190

所以这种等分方式是最接近1200屏幕需求

例如：淘宝，天猫，京东

W=(90+10)*12-10=1190

1180版心：

W=1180,i=20(10的倍数),n=12，a=80

W=(80+20)*12-20=1180

例如：UI中国

3、直接等分的栅格

简单明了，直接根据站点内容分几块

例如1：站酷

所有内容都在版心1083px内。以10px倍数为间距，每个模块250px。

例如2：echo回声

所有内容都在版心1000px内。以15px的倍数为间距。

总结：

以上栅格皆是A=100，先确定栅格间距i，再根据网页宽度定栅格的数目n。所以个人得出的定义就是现在主流的网页是以100为基准的栅格，(如：90+10、80+20、70+30、85+15)。

很多人，尤其是对于新手来说——网格系统会阻碍他们的发挥创造。你会感觉你的灵感被束缚在这些条条框框里面了。如果出现这种状况，我建议你从网格系统中跳出来，用自己的创意去设计，根据自己所做的项目,按照自己的经验来排布元素，然后再切出网格系统，想出一个二者结合的两全其美的办法，稍做调整，如果网格系统和你的原创设计出入过大，不能有效协调，那么建议换一个网格系统，或者自己设计一个。其次，网格系统用起来比较困难，有一定的学习成本，需要有一定的数学基础，你得懂比例，会计算。对于那些数学不好的人来说，网格系统真的是太复杂了。但是我认为，刚开始虽然比较难以上手，但是习惯之后，你会得心应手，设计也将会更加出彩。还有在网页设计或排版的时候除了注意竖向的布局，一些横向也是要注意的，标题间距、模块间距也要统一，最好与栅格间距统一，多以5、10、15、20、30等为间距。

网页图片

对于网页中的图片建议用一些常见的比例，如：1:1、4:3、16:9、7:5、3:2、16:10、21:9，

1.43:1、7:5等

好了，就这些，栅格系统还需大家到实际项目中去实践，用了就离不开他，用了他你好大家好。

参考文献：

http://isux.tencent.com/20984.html

[1]商业-温总.你的布局设定方法靠谱吗？[J].腾讯ISUX

http://caibaojian.com/455.html

[2]栅格化系统学习和应用[J].前端开发博客

http://www.zcool.com.cn/article/ZNDA1NTI0.html

[3] 栅格系统-详解[J]. Kiatusikaku

这是个人的第一篇文章关于网页布局的栅格，本文未经过权威认证，纯是个人理解欢迎大家批评指正。下一篇将详细讲解<实用网页&移动端设计规范整理>。写文章是为了更好的总结，希望也能给你带来学习价值。