网页栅格
栅格设计（又称“网格设计”）是最早的平面设计方法，以规则的网格阵列来指导和规范网页中的版面信息及信息分布。运用固定的格子设计版面和布局，目的是让版面更加工整简洁，更加理性化、功能化、简单化、几何形式化。这样页面的布局设计就可以规范并重用，对于大型网站而言，工作更加高效，协作更加便捷，节省了人力成本。现在，栅格设计已经成为很多大型网站设计中必不可少的一环，是布局网页信息和排版的基础。
网页栅格的优势
1.规范网页设计，特别是大型的网页设计，能够让网页内容和布局更有规律，更符合标准，易于维护。
2.对于大型网站，多页面的布局能够保持一致，增加不同页面的相似度，有利于提升用户体验。
以前在网易做专题设计时，因为专题Top图基本都是通栏，下面几块内容分栏也很简单，基本不会用到栅格。后来做PC端产品设计时，才意识到栅格对于分栏的重要性。
栅格使网页内容的分割更加专业，内容布局更加科学，不同子页面的衔接更加合理，提升网页效率。
网页栅格的弊端
规范意味着限制，过于规则的栅格会限定设计的多样性和版式的灵活性。反之，游戏专题/品牌设计为了强调视觉和代入感则会突破限制，追求个性化和差异化，通常会在版式和形式上大做文章。
网页栅格化原理
在网页设计中，把宽度为W的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”，此时把“a+i”定义“A”。它们之间的关系如下：
W=（a×n）+（n-1）i，由于a=A-i，可得：W=（A×n）-i
在实际的页面设计中，要按照内容的复杂程度和页面宽度进行栅格化设计。页面的总宽度W并没有官方数值，不同的页面在设计过程中W值都不同，主要由产品的内容框架布局决定。W的值一般为整数值；i的值一般为5的倍数，常为10、15、20、40；A的值一般为100。
智能手机出现以前，PC端的网页主流分辨率一般都在1000px以内。随着显示器分辨率的提升，宽度不断增加，现在的主流页面宽度已提升至1200px或1400px。以宽度1200px为例，将A值固定为100px，就可以12等分W。假设i值为10，W=（100×12）-10=1190（px）。W为1190px就是旧版淘宝官网的宽度。
版式变化越复杂，栅格系统就越复杂。反之，当要设计一个页面时，确定W的范围值，取A为100，然后等分W，再确认i值，就很容易确定好各版块的宽度值。
假如把页面划分为3栏布局，总宽度W=1000px，按A=100px划分，就可以分为10列。把等分的栅格根据需要进行合并，就能组合成很多不同内容的网页栅格。
以前，网页宽度在1000px以内时，页面一般都分为3栏。随着宽屏的出现，浏览器的宽度也拓展到1200px、1400px，甚至更大，相应地出现了4栏、5栏甚至更多栏的情况。但常用的还是3栏、4栏。1200px的3列分栏在1000px的3列分栏基础上，每列的宽度增加了，主要内容的字号也相应变大。留意一下就会发现，新版的腾讯官网和网易官网主内容的字号变大了，但横向阅读的短文字数量没变（关于这部分内容会在第5章“视觉承载负荷”中进行详细分析）。
版式结构与布局关系
版式结构与页面内容是息息相关的，页面内容越复杂，分栏就越多。由于人们是竖向浏览页面的，从左到右、从上到下的浏览顺序直接影响着版式结构与布局关系。首屏是页面最重要的版块，为了尽可能多地呈现产品的重要信息，第一屏的版式结构一般都比较复杂。以淘宝、京东官网为例，为了展示更多内容，第一屏分为4栏，其他屏则依旧保持3栏或者2栏的布局。
一般网页的版面都会包含页头、全局导航、面包屑导航（有些内容较少的页面没有）、区域导航栏、主内容栏、副内容栏和页尾。其中区域导航栏（当内容较多时可替换成主内容栏）、主内容栏和副内容栏是主要内容展示区域。
单栏
单栏一般展示的内容很少，但可设计的自由度大，形式也更多。首屏单栏多以通栏图的形式出现，展示的信息相对较少，所以设计的空间更大。这样头部就有了足够的空间感和设计感。
一般品牌站、概念站、产品的官网首屏都会采用单栏展示。目的是为了最大化地展示产品特征，用最具视觉冲击力的空间、设计符号第一时间吸引用户的注意，并留住用户。
2栏
2栏的分栏方式一般分为主栏和辅助栏，主栏（主要内容展示区）用于展示主要内容，辅助栏（导航、信息、广告）用于展示辅助性内容。该种类型的网页内容相对较少，内容种类相对单一，如知乎、豆瓣、百度搜索等有明显主题的相关网页。
在内容相对较少时，2栏的布局方式比较合理。主栏展示的主题内容更加突出，能够最大化地为内容提供展示空间。
3栏
门户网站主要以3栏为主，包括2个主栏（主要内容区域）和1个辅助栏。为了展示更多的内容，2个主栏的宽度相对较宽，辅助栏相对较窄，也是现在主流的网页分栏方式。
其中3栏又包括3种分栏方式：左中宽、右窄分栏（如腾讯官网），左右窄、中间宽分栏（如网易官网），左窄、中右宽分栏（如新浪官网）。也可以一栏最宽，依次递减分栏，但其中两个主栏的宽度相差不大。
其实每一种分栏方式都有其存在的理由，但按照从左到右的阅读习惯来看，腾讯官网的分栏方式是最舒适的，重要的信息放在最左侧。但同时由于网页采用居中对齐的方式，中间栏宽，两侧栏窄，这样更能突出中间栏的内容，如新浪微博，这种分栏方式也很合理。
最不合理的应该是新浪官网的分栏方式，当然不排除有些用户已经习惯了这种分栏方式。
4栏
4栏的分栏方式理论上有很多种，展示的内容较多，同时4栏会导致头部内容过多，阅读起来会有点吃力。在3栏的基础上再加1栏，增加了整体的页面宽度。其中最窄的栏宽可能是用作响应式布局。淘宝、京东官网首屏中间用了一个竖长的广告图代替了第4栏，在屏幕变窄时隐藏，有效地利用了宽屏的响应式设计。
除了首屏，底部还是采用以3栏、2栏为主的分栏方式。
多栏
瀑布流的页面就采用了超过4栏的分栏方式，那么为什么瀑布流的页面看起来不吃力呢？那是因为瀑布流页面中的栏目内容很相似，且多以图片为主，从而让用户轻松、舒适、无压力地浏览内容。
根据产品内容和布局灵活地运用栅格系统，能做出很多优秀和独特的设计。在实际的排版过程中要结合使用多种分栏方式，选择最佳框架摆放内容信息，以达到最佳的视觉效果。
当阅读媒介为计算机时，如何划分宫格，合理地把内容存放在宫格里，这是达到最佳阅读体验的关键所在。内容越多，栅格分得越细，因为只有格子多才能排列更多的视觉元素，满足当前项目的实际需求。栏宽跟屏幕分辨率有直接关系。
栅格系统也不是完美的，理论上网页在纵向的延伸方面是无限的，但在实际应用中并没有像移动端那样无限下延（除了瀑布流的页面设计）。移动端屏幕较窄，布局内容是单列的，所以纵向无限向下延伸才能显示更多的内容。整个网页使用分栏（纵向）能使整体看起来更有层次，更有趣味性。
对于内容信息不确定导致高度不确定的页面，在高度层面上就无法使用栅格。当然，具体情况还需具体分析，这就需要设计师们在实际的应用中不断地总结经验，不断实践。
栅格系统与黄金分割点
理论上采用任何宽度的分栏方式都是合理的，没有对错之分。但是在设计分栏时应该按照设计美学去分割栏目，让各个板块的宽高比更加合理、舒适、耐看。
黄金分割具有严格的比例性、艺术性和和谐性。黄金分割点是把一条线分为两部分，其中长的部分与整条线的比约为0.618。黄金分割的奇妙之处在于其比例与其倒数是一样的，如1.618的倒数是0.618，而1.618:1与1:0.618是一样的。把上述线段的长的那部分再按黄金分割点分成两部分，就能得到一个被划分成3段的黄金分割线，以此类推。
按照这个方式无限分割正方形，就能形成贝壳形螺旋——大自然对黄金分割的一种应用。腾讯、淘宝官网的页面设计分栏都在一定程度上使用了黄金分割原理，这样能让页面更耐看。
