网格是什么

栅格系统

栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
上面这段文字直接引用自WikiPedia，可以自行再了解，此处不做更多阐述。

栅格系统的本意

做互联网产品的视觉设计，包括 Web 端、移动 App 端，还是存在不少浮夸的现象，这个 浮夸 并不是特指风格，而是 强赋寓意，往往把稀松平常描述成画龙之睛，硬凑的成品最后拼上各种黄金分割以释为完美。
我们做的产品，基本上面向的都是普通人，换句话说，一个设计，当它出来的时候，基本上从业有一段时间的人们，可以很轻松地发现它的价值所在，而不需要太多论文级别的论述。这是产品与技术，呈现出来的现实意义。

话说回 栅格系统，将它应用于 Web 的排版，早先时候在国内，也确实启发了不少人。
但这是高大上的系统吗？
并不是，这只是解决现实问题的一个实践。

那个时候，Web 开发的发展还算早期，从业人员，更是属于早期，在视觉与编码(代码)交割过程中，最开始，沟通是比较粗糙的，后来相应的效率工具陆续出现，交割物料中，对尺寸、色彩的标注，也变得详尽起来。但这里也出现了一个问题， 比如说一个 DOM 元素，在一个页面中有时是 16px、另一个页面中是 17px、甚至 18px，一两个像素的偏差，在同一个页面内容易发现，跨页面了，则不算容易，除非设计师在做视觉设计的时候，也遵循了一些工程法则。
我们有没有办法，避免这种偏差？一个普通的 Web 页面，如果按照 960px 来算，真的在某个地方误差上一两个像素，并不明显；于是，我们就想了呀，如果将其分段化，就是 10px 一段，那么一个元素不是 10px，就是 20px，而不会出现 9px、10px、11px 这种误差的情况；如果 10px 的颗粒太粗了，那就 5px ……
就是这么朴素的解决思路。
在这个解决思路上，继续整理、归纳、推衍，就出现了 Web 技术领域的栅格系统。

这个系统，不单纯在团队协作中，提升了效率，就是于个人而言，也非常有意义，原本，我们可能要处理 12px、13px、14px 这些可接受误差的琐碎，在 Grid 的系统中，相当于做了限定。而这种限定，并不会影响实际的创造，却更能让设计者心无旁骛一些，从而提升了效率。

Web 网格

在做 Web 界面设计的时候，遵循一个 Grid 的思路，或者直接使用现有的网格框架，是非常可取的。
这里的 Web 网格，基本上是指建立在 CSS 基础之上的具体实践，一般会有一个基本公约，比如将一个 width 划分为 24 份的格子，或者 7 份、5 份、3 份，这样基本上可以满足绝大多数场景的尺寸设计。
当然，仍然不够用的，自己使用原生的 CSS 完成就好了，CSS 的网格框架，一般也主要处理基本的布局的逻辑，仅此而已。