公司最近要重新整治一下官网，我们希望为我们的产品在不同尺寸下都能为用户提供良好的用户体验，在手机和网页之间做好适配，栅格系统可以帮助我们做到这一点。
一. 栅格系统的基础概念
网格（Gird）：栅格系统的最小原子单位
1. 网格：栅格系统的最小原子单位
栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位，一些知名公司都以8为最小单位划分网格，规范页面秩序，比如：Ant Design、Matierial Design等。
偶数思维：以8为基础倍数，元素大小可以被大多数浏览器识别并整除，最大程度避免出现半像素的情况。
规律性：所有元素以8像素为步进单位，元素大小、间距有规律可循。
以8为步进单位，进度合适，既不显得过于琐碎，也不会因为间隔太大而显得内容分散；众多开源代码都以8的倍数作为默认设计大小；已被多次论证，8点栅格甚至已经形成了一套理论。
凡事没有绝对，如果做固定结构的网页布局，不考虑响应式网页设计，也可以自行根据实际情况以偶数作为最小单位来设计网格。
2. 列+槽（Column+Gutter）
列（Column）：列是栅格的数量单位，通常设定栅格数量说的就是列的数量，比如12栅格就有12个列、24栅格就有24个列。通过设定列的内边距（padding）来定制槽（Gutter）的大小，剩余的部分称为栏。
槽（Gutter）：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑。槽通常设为定值。
通常情况下，web 端采用 12 列，平板采用 8 列，手机采用 4 列。当然，你可以根据项目特点来设计你的网格系统。用户已经习惯通过鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容，因此竖直方向可以无限延伸，所以栅格系统在竖直方向的栅格可以不体现出来，我们在执行设计时只要在水平方向保持规律的变化就可以了。
3. 栅格宽度（Container）
栅格宽度（Container）：页面栅格系统的总宽度。
4. 边距（Margin）
边距（Margin）：栅格外边距，与屏宽保持一定的安全距离.
行：栅格系统的横向网格，与纵向网格的列成垂直状态，列和行交叉的区域形成页面的内容区，由于目前网页多采用瀑布流形式，上下滑动区域变得不受限制，随意性很高，本文忽略这一部分。
这里需要注意的是：我们把栅格的列（Column）看做是栏+槽的宽度，12栅格即是指12列。有一些文章对栏和槽的理解是下方左图的样子，而从开发角度来说，下方右图是前端理解的栅格。我们用栅格来制定页面视觉规则，同时也要理解开发怎样实现栅格，才能在工作中减少不必要的沟通误区。
5. 盒子/区域
建立好基础栅格之后，一块内容通常会占用几个栏和列的宽度，我们把这个区域理解为内容盒子，用于承载一个区域的内容。
以 12 栅格系统为例，一个 12 栅格系统可以根据业务需要被 2 等分、3 等分、4 等分、6 等分、12 等分，还可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不对称分割，具体采用哪种比例的组合需要我们根据自己业务需求来定。
6. 页面边距
页面边距就是内容区域以外的空间，比较推荐的设计就是页面边距可以随着屏幕尺寸的增大而增大。页面边距在移动设备上通常是 12Px到 40Px 之间，在平板设备和桌面设备页面边距变化就相当多了。在响应式设计中，你选择了一个页面边距之后，缩小页面宽度时页面还是会有你设置的最小页面边距，直到到达下一个响应点（breakpoint）。当你增大页面宽度时，页面就有更多的页面边距，直到页面宽度到达下一个响应点（breakpoint）。
以上，栅格的基础概念已经清楚了。
二. 响应式布局
1. 什么是响应式？
设计师想要制定一套针对不同设备和屏幕的设计方案，需要一整套的策略。确保让用户在任何一个屏幕上看到内容的时候，会觉得这些内容就是为这个平台而设计的,这种无缝的体验，才是跨屏幕设计的真正难点所在，最终影响着用户使用时的效率与体验。
2. 响应式设计的核心步骤
确定产品所覆盖的设备类型
不同的设备组合通常是基于不同的场景、需求和服务来构成的，用户会针对不同的屏幕进行不同模式的交互，甚至处理的内容也会有差异。
比如说，在手机上，用户更加倾向于使用轻量级的任务，并且进行一定量的沟通和交流。在平板上，用户行为更多集中在内容消费上，并且目前平板的使用量被认为在逐步降低。桌面端依然是用户完成较为专业、复杂任务的首选平台，足以应付复杂多样的内容。了解各种设备类型和使用场景是用来构建用户体验的关键。
针对不同内容来匹配用户体验
并非所有的内容都符合不同设备的使用场景，比如智能手表就不适合展示大量的文本内容。你的产品所覆盖的设备组当中，每种设备的使用场景不同，应该匹配的用户体验也不一样。移动端用户和桌面端用户的需求就是不同的，场景差异也很大.
可优先为小屏幕做设计
优先设计最小屏幕的界面，会强制从最关键最重要的地方开始设计。实践经验表明，移动端优先的设计往往能够更好的专注于核心功能，更适合作为产品设计的起点。在此之后，再进行平板、桌面和电视端的设计，就是一个自然地做加法的过程了。在绝大多数的案例当中，最小屏幕通常是手机屏幕。
3. 为何要利用栅格系统来进行响应式设计?
而这两点正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较高效快捷，所以响应式与栅格化天生一对好搭档。
三. 怎么样建立网页栅格
1. 确定屏幕尺寸，确定安全范围
当我们开始着手做一个项目时，首先应考虑在多大的尺寸范围内做设计，也就是确定栅格区域的宽度范围。
2. 确定关键数据：列的数量、水槽的宽度
常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量，划分的格子越多，承载的内容越精细。通常，在信息繁杂的后台系统常用24栅格，而一些商业网站、门户网站通常划分成12栅格。
栅格不是划分的越细越好，24栅格精细，但也容易显得琐碎，内容排布的规则太多，也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格，也是可以的。
△ 槽的数值越大，页面留白越多
需要注意的是，槽的区域不可以放置内容。通常，我们会给槽设定一个定值，用来确定栏的大小。
计算公式
我们假设内容区宽度为W（Weight），列宽为C（Column），列数为n，槽为定宽G，可以得出：W=C*n。由于槽不可以放置内容，可见内容区为：W=C*n-G。
举例：我们为一个屏宽1440的项目划分栅格，首先确定内容区宽度为1440，24列，槽为定值16；那么可以得出列宽60，栏为44。
内容区应从水槽开始到水槽结束。
目前，很多软件提供自动栅格设置功能，sketch也提供这样的功能：Layout Settings。
Total Width：相当于 Container，是内容区的宽度。
Offset：表示栅格的偏移量，表示栅格从哪里开始。
Number of Columns：表示栅格的数量。
Gutter on outside：记得勾选。勾选以后栅格的设置才是跟前端的栅格算法匹配。
Gutter Width：槽的值，通常是定值，控制页面留白间隙。
Column Width：列的值（栏+槽），也就是栅格单个内容区的宽度。
四. 如何做到响应式?
在传统的栅格化系统设计中，列的宽度和水槽的宽度是保持不变的，只是列的数量发生变化。也有更多的响应策略，例如当视窗（Viewport）发生变化时，内容区域的元素如何去响应，具体到我们当前的栅格系统，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 组成的盒子（BOX）四者的值（主要是宽度）如何变化，以及在这种变化之下我们页面的布局如何调整。
1. 固定栅格或是断点系统（Fixed boxes or breakpoint system）
固定网格，列宽和水槽宽不会改变，只是改变列的数目，当窗口缩放时，排版布局不会发生任何改变，只有当达到一个临界值（开发那边设置好的固定的值），界面才会发生改变。在此之前界面排版都是不变的，就像一部分被切掉了。
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在桌面的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到平板屏幕尺寸临界点时，设计布局马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。下面是常见的断点系统（Breakpoint System）
△ 我们公司的前端工程师Sam整理的😊
如图，响应式是以视窗的最小宽度作为基本依据来制定每种宽度下 Columns、Gutters、与 Margins 的响应策略，也就是说 Viewport Min-width 是做出响应的触发条件，视窗每达到一个最小宽度，就会触发该宽度下预设的页面布局方式，而每种布局都是在该宽度下的最佳布局，也是因此，响应式才会在各种复杂分辨率条件下都能给用户比较好的体验。
每个视窗宽度的最小值是触发响应的关键值，因此我们给这些用于触发的关键值起了个名字叫「Breakpoint」，每个 Breakpoint 触发一种响应策略。
2. 流动栅格（Fluid Grid）
流动栅格系统是编辑内容，仪表板，图像，视频，数据可视化等理想的响应策略。当窗口缩小时，内容将动态地发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。在各种情况下，对用户来说，扩展内容的大小比扩展可见内容的数量更有用。
断点 BreakPoint 只是一个更改布局的参考点。这就是为什么列宽和水槽的数量不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。内容宽度会随着窗口的缩放而发生改变，例如图片会缩小，文本会换行。水槽的宽度不一定是固定的，可以随着页面宽度变化。
在每个断点处，列计数是固定的，列宽度是最小网格 8PT 的倍数。行高是列大小的倍数，遵循推荐的纵横比。边距和填充是小单位的固定倍数。在断点之间，实际列宽是网格区域的百分比，而不是一个小的单位倍数。内容尺度流畅。
首先从所以屏幕大小中选择一个基本尺寸，然后按照推荐的纵横比以基本大小的倍数构建每个响应式尺寸。当每个块使用相同基础大小的倍数时，就会出现网格。遵循此方法可确保栅格系统一致性，甚至跨产品的一致性。
3. 混合栅格（Hybrid Boxes）
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。后台系统设计、工具型的界面设计就比较经常使用网格和流动网格组合的形式。例如的后台管理系统（dashboard）侧边栏是固定网格，右侧内容是流动网格。混合栅格在每个维度上有不同的缩放规则，所以它们不使用统一的缩放比。当用户需要调整浏览器的大小以使内容在一个维度上伸缩而在另一个维度上不伸缩时，便使用混合网格。
五. 面板对栅格系统的影响
1. 灵活面板（Flexible panels）
灵活的面板允许折叠和扩展状态。面板的展开状态为固定宽度，用户无法调节。当用户将鼠标悬停在折叠的面板上时，面板就会展开。当灵活的面板扩展时，它们要么压缩内容和网格，要么将内容推到浏览器边缘之外。
2. 固定面板（Fixed panels）
固定面板保持静态宽度，不能折叠，也存在于响应网格之外。
3. 悬浮面板（Floating panels）
此面板样式漂浮在主要内容区域之上，不影响响应网格。浮动面板将所有内容隐藏在其下方，用户必须将其移除。内联菜单、下拉菜单和工具提示也是浮动的。
总结
写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统，不仅仅需要理解网格是如何工作的也要注重自己的项目中使用这些原则。
以上就是个人的小小的学习总结，希望可以给大家一些启发和借鉴～～
