在面对复杂信息的排版与布局时，设计师如何进行决策，是凭借感觉经验不经思考的随意摆放，还是有一套自洽的理论体系得以遵循并规范化整个设计，且延伸至整个产品线，多业务，多平台成为通用的布局准则。我们当然皆希望成为后者。
1.什么是栅格
一句话概括：栅格系统是用于规范化信息布局，辅助设计人员组织信息的工具，且能够尽可能保证设计与开发过程的规范高效，并提高布局视效的一致性、韵律感、秩序严谨、比例良好等方面。
在平面设计领域通常采用“网格”的方式来规范化布局，网格就像设备屏幕上的一个个像素点，平面设计师将物料核心版面区域拆分为等分的方格，以保证、对齐、节奏、比例、视觉面积等方面的协调感和一致性，从而保证设计美感和视觉传达效率。
2.网格/栅格的发展历程
早在文艺复兴时期，人们便有意识的使用辅助线叠加在图片上的形式来模拟透视关系，且已经开始使用黄金比例矩形。13世纪，法国建筑师VillarddeHonnecourt创作了一张图表，试图实现“和谐的设计”。该图将网格系统与黄金比例合并，以产生基于固定比例的边距的页面布局。该技术至今仍在使用，大多数印刷书籍和杂志的设计师都使用VillarddeHonnecourt的图来创建平衡的设计。
而我们今天所使用的网格更多的是受瑞士版式影响。第一次世界大战时，一直保持中立的瑞士成为了欧洲各地富有创造力人士的聚会场所。由于必须以三种官方语言（德语，法语和意大利语）设置印刷出版物，因此设计师需要一种新的网格系统来实现这一目标。像JanTschichold和HerbertBayer这样的印刷商都采用了模块化的方法。第一次，间距留白被用作布局设计中的动态组件，这促使网格系统的发展。（JosefMuller-Brockmann）的图形设计网格系统，1961年。
可以发现，栅格是用于组织信息的工具，不论是几个世纪前的印刷物，还是如今基于屏幕的信息布局，都可以利用栅格来实现更规则、一致、和谐的信息展示效果。
小游戏：在两张纸上绘制一个图形，怎么保证位置一致？给一些人分配两张空白纸，给一些人分配两张带有网格的纸
一个栅格系统主要由Container：容器、Columns:列宽、gutters：水槽、出血：Margin四部分组成。
其中容器指的是我们需要布局信息的版面区域，一般为整个屏幕，或排除固定浮动区域的其他部分。栅格系统的其他三大元素都要基于该容器的大小去计算。
Columns列宽一般指的是纵向分割空间中较宽松的部分，常用与放置主要信息，其边界对应着模块化信息Box的外边框。在设计软件中一般以带有颜色的矩形的形式展示，很容易分辨。
Margin出血则比较好理解，源自平面设计印刷设计领域，是包围在信息区四周的空白区域，在印刷领域用于裁剪以保证输出成品的尺寸的规整，而在产品设计领域则用于两侧间距以增加界面呼吸感，优化界面视觉精致度乃至信息的浏览体验。
栅格主要划分横向X轴屏幕的比例，以保持整体设计的规范化一致性，保证信息展示的节奏感，韵律感，以及保证同类信息同层级信息的视觉重量不会偏差。由于不论是移动设备还是PC，横向屏幕的展示空间都是固定值，因此可以利用栅格定义并提炼横向间距规则为通用规则，来适配整个产品的所有界面。纵向由于可以无限延展，因此没有必要做栅格划分。只需要根据产品设计早期定义的常用间距规范来适配。在常规的设计系统中，往往会将栅格和间距分作两部分来讲，因为两者既有互补关系又有界限模糊的区域。其中间距系统可以用来解决纵向信息布局的设计问题，而栅格则解决横向，而实际工作场景，两者界限可能会融合间距系统定义的间距值可能会和栅格系统的间距重合，这并没有什么问题，具体场景以设计师判断为准。
tips：纵向主要影响布局精确性的问题是字体，需要了解不同字体不同行高场景下对应的字体高度、上下间距留白，将由行高与字号计算来的空白纳入间距规则。一般字体上下一侧的留白为行高减去字号/2。
12栅格与24栅格n倍栅格
在产品设计中，最常用的栅格系统为12栅格与24栅格，而其中最为通用的则是12栅格系统。
一般情况12栅格能适应大部分场景，因为12能够被2、3、4、6整除，这意味着你可以将屏幕空间等分为2、3、4、6份，可以满足各种复杂信息的拆分布局的场景。
除了等分布局，12栅格在不对称布局时也能进行较和谐的比例划分，如双栏布局时的4+8栅格，3+9栅格。三栏布局时的2+8+2栅格，3+3+6栅格。
而在屏幕较大，且需要精细化布局的场景下可以采用24栅格的布局方式。针对24栅格有个很简单的解释——列越多越灵活。使用与否主要看需要进行处理的信息内容层级的多寡，当需要对屏信息进行多个模块的拆分，24栅格允许你进行更多划分提高布局灵活性。
如下方的Antdesign栅格系统，作为web端通用的设计系统，Antdesign需要适配不同设备环境，满足不同产品的诉求，因此为了保证最大的灵活性而选择24栅格。
当然，我们不要被局限在12栅格和24栅格，栅格只是一种工具，可以灵活根据实际设计场景来选择栅格列数，例如比较简单的卡片布局，可能仅仅使用4分栅格就能完成规范化的设计与排版。再例如，我横向布局元素为奇数5个，那我可以使用5栅格，要进一步精细化布局（5分的模块内可能仍然有信息需要拆分对齐）可以使用10栅格等等。下图展示了比较灵活的栅格用法，而不是强制12或24栅格。
下图展示了针对“金刚区”五分栅格的灵活运用示例。（当然在实际设计金刚区元素时布局会更加谨慎，这里作为栅格操作示例）。未经调整时为完全等分的效果，然而设计师需要将核心区域进行聚焦，因此会考虑增加两侧margin值，来进一步突出中心元素。另外在栅格数量的选择上，根据实际需求我们可以选择五分栅格，但为了追求灵活性及后续延展性，可以把5栅格进一步划分为10栅格，但他们实现的均衡效果是一致的。
在正式开始讲解栅格的作用前，我们可以先来做一个小游戏。由两个人分别代表A和B组，每人拿到对应组的两张纸稿。其中一张标有红色圆点，而两个人需要做的是在另一张纸上还原这个点的位置。其中B组就是使用设计师祖传钛合金眼睛来定位，但结果必然无法做到完美。而A组，在栅格的指导下，可以以高精准度和高效率完成圆点的绘制，这个小游戏很好的帮助我们理解栅格在实际设计中发挥的作用。
视觉角度
1.对齐
栅格的所有元素的边界都能作为对齐参考线。优秀的设计师连1像素的对齐失误都能肉眼识别，我们之所以如此在意对齐，不仅仅因为它从设计师的角度定义了限制规则来帮助我们更好的执行设计，更是因为对齐直接影响了阅读受众浏览信息的体验。对齐线恰好是阅读的起点，对齐的内容能够使用户在无意识的状态下浏览信息而无需花费过多成本去转移视角，从而大大减少了阅读时的附属行为，使人沉浸于内容本身。
当然，对齐的内容自有其因秩序而产生的美感，姑且算是一个因素。
2.间距
栅格控制的不是所有间距而是主要间距，以保证模块层级分割的节奏感与一致性。例如栅格控制margin出血的间距，以圈定内容区面积,两侧留白能制造良好的呼吸感。同时栅格的gutter则是用来控制X轴向元素间距、模块间距的通用间距。
3.分割比例
在信息排版中，良好的比例关系能够极大提升阅读体验与信息美感。同时典型的比例关系易于降低设计师决策成本，增加设计确定性。如下图中的两个案例。X轴同时存在两组或三组重要性等同的信息时，我们自然会选择等分设计，将12栅格分为两份6+6及三份4+4+4。如此，设计师可以保证每组信息所占的视觉重量基本相等，页面得以平衡。下方是标准等分栅格的示例，及标准非对称栅格的示例（导航等辅助区域+主内容区=1/4+3/4）
在如下方我在日常工作中运用栅格的一个实操案例。作为一个标准的Landingpage落地页，核心利益点由配图+文案组成，由于总的内容较少，最终决定采用左右混排的布局以充实版面，为了保证左右视觉版面的平衡，利用栅格计算其面积，平衡视觉效果。其中紫色文案区域基于Box给予1/2Gutter空隙来判定其宽度，居中处理。纵向模块间距则采用2倍gutter.
通过上面两个示例，我们能看出采用通用比例能够大大降低设计决策成本及提高输出物的确定性，从设计师角色角度讲，无论是其提供设计阐述依据还是提高设计效率的功用都大有裨（bi）益。从视觉角度讲，栅格比例关系与黄金比例规则结合，利于输出平衡有秩序感的优秀版面，并间接提高用户浏览体验。
设计角色角度
栅格还利于规范化设计，当存在多设计师协作的设计项目时，栅格系统利于帮助统一设计一致性，统一输出标准。避免了多方参与导致的主观因素的影响。
开发角度
还原度始终是设计与开发对接中存在的问题，而栅格系统能够很好的帮助我们规避常规的横向间距类问题（纵向间距问题主要受字体的设置影响），以提高设计还原度。
1.自适应方案,屏幕适配
栅格同时能够指导页面在多平台多屏幕尺寸下的自适应设计。便于与开发对接，阐明流动布局或端点布局等适配方案，保安证还原度的同时降低沟通成本。优秀的自适应方案能够使产品脱颖而出，在不同设备不同环境下都呈现出优秀的展示效果。下方是一个自适应方案的演示。更建议大家打开Dribbble直接缩小浏览器窗口来了解。
4.规范角度+总结
且由于栅格系统在产品设计领域已经成为约定俗成的规则，因此在当前用户使用的所有产品中，都存在栅格系统的规则影响，因此用户对栅格系统下形成的模块化固定化的信息布局方式已经养成交互、浏览的习惯，如常见的两分布局形式。这将尽可能保证你的设计符合用户对产品界面的预期，也就能够使用户快速完成任务，实现用户体验目标，且使这个过程尽可能的流畅高效，自然无意识。
下面我们可以开始正式建立栅格了，只需要按照下面几个步骤，我们可以计算出符合需求的栅格系统。
1.选择栅格列数
在正式计算栅格元素的数值前，你首选要进行抉择的是栅格的列数。前面也有讲到我们最常使用的是12栅格和24栅格，但栅格本来就是一个灵活工具。此时你需要结合真实需求来判断，涉及到需求的内容规格，上线平台，交互模式等。假设，该需求需要发布在多平台，涵盖PC和移动端，同时内容较为简单，采用常规的交互与导航，那你可以选择12栅格来兼顾移动端和PC端，并能够很好地解决平台自适应的问题。
但如果该需求发布于PC平台，且功能复杂，内容繁多，我们拥有了大屏幕、复杂内容规格的判断条件，因此可以考虑采用灵活性更高的24栅格。
2.确定容器宽度container
需要强调，适用栅格的设计区域并不一定是你的设计稿尺寸，需要根据真实场景判断，只有真正需要放置主要信息，或者需要进行多平台适配的区域才是容器区域。排除存在误导的区域可以使栅格更易于划分。
例如在一个常规web落地页的需求设计中，我们会基于1920或1440尺寸来定义整个设计稿的宽度，而用于布局主要信息的核心区域实际仅有1024，两侧留白则是用于适配不同屏幕尺寸，这也是最常规简单的适配方案。
定义出血值margin及通用间距Gutter
产品UI中的margin值对最终视觉呈现有较大影响，margin值越大，信息越集中紧凑，两侧留白充裕呼吸感较强，但可布局信息的区域越小。反之，则核心区域版面充足，布局亦可更加宽松，但两侧空间狭窄容易产生压迫感。
通常，无论是PC还是移动端，我们都有一些约定俗成的margin规则，因此关于定义margin值我们可以直接沿用典型的间距系统下的标准。基于现代屏幕的UI设计都离不开4倍8倍间距系统的规范，人尽皆知所以这里便不做赘述。一般最为常用的基础间距为4，8，16，24，32，48，将其中最为常用的16px作为基准值，1Rem=16px，则可以生成下方这一套常用间距系统。(Rem是开发常用的计算方式，基于此建立栅格与间距系统利与理解，降低沟通成本，提高还原度）
通常其中的1Rem值就用来定义Gutter值，因为它最通用，覆盖场景最广。而margin值通常为2Rem或者1.5Rem。例如在移动端我们基于16px标准间距将margin定义为32或24px。
1.手动绘制
在下图中，我以750尺寸的Iphone设备为例。假设我们希望以16px为通用间距（16px=1Rem），32px=2Rem为出血值。则此时公式如下：12C+11*16+2*2*16=750（12Column+11Gutter+2Margin=Container）
求出的结果为42余6.大部分情况我们都没办法使栅格系统刚好整除，因此需要专门处理多余的像素值，将多出的6px分配到12栅格上正好构成了6个42px的Column+6个43px的Column.
2.基于Figma
Figma自带的LayoutGrid功能是我目前体验过的最佳栅格工具。它不仅仅提供栅格同时提供网格功能。最关键的是，它计算栅格的逻辑契合设计师布局的诉求。如下图，设计师只需要选中想要使用栅格的对应画板，通过右侧检查器中的LayoutGrid添加一个栅格，它默认为Grid模式，需要在左上角切换为Column模式。然后如图所示将Count栅格数量与margin出血、Gutter间距三个元素配置好，即可生成最终栅格。经过测量，该栅格中的每一条Column为42、43相间排列，与我们计算的结果相契合。
3.基于sketch
Sketch则更加繁琐些，首先想要使用栅格需要在视图/画布/显示布局中开启。而需要设置栅格的具体值则需要在视图/画布/布局设置中进行处理。其中总宽度指的是栅格红色区域的面积，即排除Margin的宽度，因此在750尺寸下，排除32*2的margin后，其总宽为686，偏置32则控制的Margin值，间距对应Gutter，列宽对应Column.
1.强制对齐
栅格不是强制对齐的规则，很多时候可以也应当根据实际情况打破栅格，不要害怕超出栅格，但要清楚的认识到打破栅格的目的是合理的，是符合需求的。例如下图中的标题与配图为了实现叠加的纵深感样式，不必遵循二等分的栅格配比，而是可以突破栅格，延伸到图片区域。而在更多场景下，一组布局元素中，栅格仅仅需要控制总容器的位置与比例关系，而该复杂容器内部的细分元素是无法严格按照栅格排布的。
2.栅格整除
栅格无法永远精准整除，或者说，大部分情况下栅格都是无法整除的状态。而相差的像素值往往是无法被用户以肉眼察觉的，我很赞同大家对于每一像素的执著，但你们应该很容易能理解，栅格本质上不是为了保证像素级精确，而是为了保证浏览视觉级别的秩序、协调与统一。就像之前提到的案例，当我计算完12栅格的数值分配后，发现其中6个42px，6个43px，每条栅格1px差距，当将他们组合排布后，肉眼很难识别其中的差距。下方的真实设计案例解释的就是此类非整除场景。
3.栅格区域
栅格不一定是整个屏幕或界面，实际上我们只需要在活动区域、主要内容区域进行栅格化，例如左侧导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，其占据的界面区域也不需要用来布局其他功能及内容。
4.栅格嵌套
我们通常使用一组标准栅格来控制全局的视觉效果，但有些时候无法仅用一组栅格来适配产品需求中的所有细分业务，细分界面。例如在下方示例场景中，在偶数栅格中需要添加三张图片，那我们可以将图片区域作为单独划分的栅格区域来重新定义栅格值，对齐进行三等分。在实际需求中有很多场景需要在总的栅格系统中嵌入一些小模块对应的栅格系统。