题记：提起网页布局，大家公认最为规范的就是栅格系统，对于高深的栅格系统，很多人可能琢磨不透，其实我们定的各种网页对齐规范，网页模块大小规范，就是来自栅格系统。本文是个人学习前辈的文章和主流网站的分析，总结的对栅格系统的理解，得出的[a+i=]栅格布局。
（本文仅做学习交流使用，未得权威认证，欢迎大家批评指正，文末注引出处。）
栅格系统
栅格系统英文为“gridsystems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。最早出现于印刷，简单的说就是运用固定的格子使界面排列工整简洁。后来延续到web设计，其中比较有名的是GridSystem。目的也无非让网页布局的更合理、易于阅读等。
使用网格系统，让你的设计具有正式感和规范感，还具有一种结构分明的设计感。这让你设计起来更轻松，对于开发者来说，同样如此。（让设计师清楚的跟其他人解释他们是如何设计的）
栅格化的基础概念
当n＝24,i=10;假如A＝40，则W＝；假如A＝50，则W＝；假如A＝60，则W＝。
当n＝24,i=20;假如A＝50，则W＝；
当n＝12,i=20;假如A＝，则W＝；
栅格化是通过确定等分的单位宽度以及单位宽度之间的间距，把单位宽度进行组合的一种排版方式。
首先分析等份的复杂度，如果版式仅仅是4等份、3等份的话，12列的栅格系统就可以满足需求。如果有较多不等分的可能，那么还是建议采用24列的栅格系统
栅格系统的三种形式：
1、有边距的栅格：
当我们用已知想做的宽度的时候，可以用这种栅格
假设W=,i=30(10的倍数),n=12
W=(a+i)*n
=(a+30)*12
a=70
例如1、人人都是产品经理采用这种栅格，（所有内容皆在版心px内，图片内容块是A的倍数，多数内容间距30px，根据内容灵活应用栅格）
2、无边距的栅格
假设W=,i=10(10的倍数),n=12
W=(a+i)*n-i
+10=(a+10)*12
a约等于90
所以W=(90+10)*12-10=
所以这种等分方式是最接近屏幕需求
例如：淘宝，天猫，京东
W=(90+10)*12-10=
版心：
W=,i=20(10的倍数),n=12，a=80
W=(80+20)*12-20=
例如：UI中国
3、直接等分的栅格
简单明了，直接根据站点内容分几块
例如1：站酷
所有内容都在版心px内。以10px倍数为间距，每个模块px。
例如2：echo回声
所有内容都在版心0px内。以15px的倍数为间距。
总结：
以上栅格皆是A=，先确定栅格间距i，再根据网页宽度定栅格的数目n。所以个人得出的定义就是现在主流的网页是以为基准的栅格，(如：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://www.guyukameng.com/aspnet/2018-12-29/10254.html