本文主要介绍等距栅格，旨在为有需要的同学解析栅格，从概念、结构和设计上更有效、自信地解决栅格问题，其实主要还是自己对栅格体系的查缺补漏。大家可以对照目录跳着阅读。
事实上，绝大多数的设计师都知道栅格很重要，简单点就是等分运用在内容层。当我们仔细研究栅格相关原理时，只要不嫌麻烦，就会发现在栅格系统下能更快解决设计问题，并让设计更具功能性、逻辑性和视觉美感。
栅格是什么1.栅格与网格栅格与网格的本质其实是相同的，实现有组织的设计最简单方法之一就是应用网格系统，约束性地为你提供了一个非常基本的设计框架，这是一种久经考验的技术，最初运用在印刷版式中。网格与栅格英文都以“Grid”来表示。但一般我们更愿意在平面设计中更多的称为“网格”，会存在上下或倾斜，在网页端或移动端中更多的称为为“栅格”。
常见网格系统有三种：直接分割，等距分割，数学分割。本文主要介绍等距栅格，网页中的网格是指使用垂直和水平(较少)等距辅助线对布局进行的划分，它形成了用户界面的基本结构或框架。
平面设计一般用到的是固定的纸张规格，宽度和高度都是固定的，网格会存在上下或倾斜的视图；在界面中栅格宽度跟随不同设备，高度由内容多少来决定，是上下视图。
界面栅格系统是从平面网格系统中发展而来，以依据一定的规律、合理设置基准线来指导和规范界面中的如文本、图像、按钮和其他元素，保证页面的每个区域能够稳健地排布起来。栅格系统的使用，让界面信息呈现更美观易读、更具可用性，对于前端来说，网页也将更加灵活与规范。
2.栅格的设计哲学将栅格视为一种秩序系统来进行使用，是设计师某种特定的精神和态度的表达，它体现了设计师是以一种结构性、预见性的方式来进行构思和设计。同时，这也是一种职业信仰的体现，设计作品应该是易懂的、客观的、功能性的和具有数学逻辑美感的。
用结构化、系统化的栅格手段进行设计，对设计是具有极为重要的意义的。使用栅格系统就意味着设计遵循普遍与合理。系统化和清晰化、集中精力看透关键问题、用客观取代主观、理性地去看待设计过程。
3.栅格的价值产品设计中，参与设计的人员越多，用户设备越多，屏幕越多，设计师就越需创建一套栅格系统来组织内容，使设计内容与细节能适应更多场景。合理的栅格系统可以通过调整布局满足产品各设备尺寸的需求。
有序可依，提升协同效率
对于设计师与团队：栅格系统定义了一套底层的、统一的测量单位，当设计团队内对此达成共识时，可以避免因屏幕适配、比例换算产生的像素偏移，适配多种屏幕，提升精致细腻程度，同时保证了设计稿件中元素属性的一致性和规范化，并有效降低设计师的决策成本，提高不同设计师之间的协同效率。同时避免了设计师与前端工程师在细节上的反复沟通确认，提升了整个开发效率。
布局规律，减少认知成本
对于用户：运用网格系统能够让设计更有秩序和节奏感，规避了不同设计师理解不同造成产出差异的问题，如页面节奏，空白等。在保持与原先展示内容基本一致的情况下，页面信息结构更加清晰，提高阅读效率，减少认知成本，提供一致性体验。
4.栅格的的组成栅格使用列在水平方向上拆分页面，以有组织的方式对元素进行布局，并模块化设计多个页面和组件。同时栅格还定义了一组固定的测量单位，指示每个设计元素遵守的尺寸，间距和对齐方式。
最小单元
网格的基本构成就是单元格，由格子组成网。间距都可以用最小单元来增加或者减小，最小单元格是所有设计元素（从排版到列，框，图标和插图）的几何基础，它为所有创造性的决策提供了结构和指导。所以栅格系统的重要一步就是需要先定义好栅格的原子单元大小，我们以最小单元去定义网格系统。
最小单位推荐8px
目前web端最普适易用最小单位的是8px，我们利用8px建立网格，8的倍数组成了列、行、框的尺寸以及它们的边距和填充，使用8的倍数来定义模块的间距与元素的尺寸。
当我们熟悉最小的栅格单位8px以后，能有力的减少决策时间。整个设计的元素大小，尤其是间距可以快捷的在脑海中反应出来，8、16、24、32、40、48、56、64、72、80、88、96、等，这里都是8的倍数或能被8整除。让设计师带着工程实现的思维去考虑页面布局，设计侧和工程侧对页面一致性的解读，能够有效降低设计到实现的转化成本，提高开发效率。也要注意间距不能无脑套8的倍数，优先用8，当跨度太大也可以使用4和12。
那为什么不选择4，6或10？
注意的是最小单位应由实际工作来决定，没有绝对的最小单位数值。在适用性方面，4、6、8、10这四个数值都基本可以满足。
当使用4px时，页面就会被分割的非常细碎，当8不够用的时候，就要使用4了。
最小单元格的数值选择需要从两方面考虑：
最小单位在具体使用时是否具有一定的灵活性
最小单位能否被大多数屏幕的宽度整除，即广泛的适用性
屏幕尺寸和分辨率种类有增无减。使得设计师对“维护适配性”的难度越来越大，设计稿导出会有
0.5、0.75、1、1.5、2、3倍多种需求，在1倍设计稿，奇数（比如5px）就会出现半像素偏移。而6除以2得3，3就是奇数了，10除以2的5，6和10不能被2除尽。使用偶数8px可以轻松一致地缩放各种倍数而不失真，大多数流行的屏幕尺寸都可以被8整除，足够普适，以8px为增量进行缩放可提供大量选项，所以推荐8px。
列+列间距+大边距
栅格系统由3个部分组成：列、列间距、左右大边距。栅格系统是由列和列间距交替分布形成的，列是栅格的数量单位，虚拟的垂直块，用于对齐内容，我们以百分比或固定值定义列宽。竖直方向根据页面内容是可以无限延伸，所以栅格系统在竖直方向的栅格可以不体现出来，设计时只要在水平方向保持规律变化就可以了。
通常设定栅格数量说的就是列的数量，如12栅格就有12列、24栅格就有24个列。列间距把控页面留白，数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑，画片分割的越碎。
大边距就是设计内容区以外的空间。我们在设计中一般将大边距宽度定义为固定值，该值决定每个设计的最小呼吸空间，灵活的边距占据了由列，列间距组成的网格后的剩余空间。左右大边距是计算在栅格的总宽之内的，删格系统的宽度就是列、列边距、大边距之和。
也有弹性大边距，会根据不同的屏幕尺寸而变化，就是页面边距可以随着屏幕尺寸的变化而变化。页面边距在移动设备上通常是12px到40px之间，在平板设备和桌面设备页面边距变化就相对多了。
容器
我们按照页面结构从组件–容器–区块–页面–场景进行依次拼装成最终形成产品设计方案。容器集合了下级组件，也可以是多个复杂元素的集合，文字、图片、按钮。如登录区块是由多个标签、输入框、按钮组成。容器是成组的设计元素，形成了独立的内容或功能盒子。区块嵌套容器，由区块组成了页面内容。
栅格规范的是容器间比例，而非具体宽度。容器大小收到栅格系统的限制，栅格系统可以根据需求被2等分、3等分、4等分、6等分、12等分，具体采用哪种比例的组合需要根据需求来定。栅格系统/设备分辨率大小在变换的同时会带动区块大小的变化，从而使容器发生变化，如元素尺寸变化，文字换行等。
如下图，共有32个容器。对于紧密相关的内容，请考虑组成区块。页面被分割的越碎时，设计中越难把控。
5.拓展知识栅格系统
这是一个比较单纯的框架。从年代后期开始就基于表格的布局开始使用的栅格系统GridSystem。与早期计算机相比，虽然今天的屏幕分辨率达到了很高的尺寸，但使用像素的宽度依旧可以确保在许多屏幕上能够正确显示。
GridSystem，是由NathanSmith开发的CSS框架，因为早期的电脑荧幕宽度约为，扣除浏览器的卷轴及边框，为px，GridSystem有12栏位、16栏位版本，正是意味着，12能被3、4、6整除，能建立3栏、4栏、6栏的版面配置，网页的使用也比较灵活。网页版面可以轻松配置，合并，也不会有畸零数，非常适合排版。
GridSystem是使用固定宽度px，置中对齐画面的方式呈现在网页上，去除左右两边各10px的边距空间，留下中间px的设计内容区，以20px作为槽。
而超出的部分的设计元素，就使用定宽设计。
Bootstrap网页框架
今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数Bootstrap了。
Bootstrap是Twitter推出的一套强大网页框架，是全球最受欢迎的前端开源工具库，它支持Sass变量和mixin、响应式栅格系统、自带大量组件和众多强大的JavaScript插件，也提供了快速建立响应式网页的功能。已经更新到V5.0.1版本了Bootstrap中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。市面上很多前端框架会对Bootstrap进行补充或基于Bootstrap开发。
Bootstrap提供的栅格系统，也是一样将内容区分12等分。
它将系统分为12列，当然也可以通过变量来改变列数和列宽，水槽宽度，屏幕浮动宽度；其实设置屏幕浮动宽度就是我们看到的屏幕自适应，就是根据屏幕宽度来选择显示参数。Bootstrap中的栅格流只能作为大的布局定义，那么针对最小单位是该用8、10、15还是多少也是需要根据需求去做分析。
12列结构可以进一步分解4等分，3等分大小的模块。
Bootstrap英文网