网页设计栅格化系统 第1篇
12 栅格和 24 栅格是目前比较常见的列数结构。选择使用哪种栅格结构，取决于产品对设计的要求。
12 栅格：当产品涉及到多平台发布，内容较为简单，单个容器盒子内信息面积较大时，可以考虑采用 12 栅格来兼容。
24 栅格：如果当前产品发布于 pc，内容较多，且功能繁杂时，则需要更灵活的栅格系统去规范信息内容的布局，这时我们可以考虑采用 24 栅格，国内较为主流的企业级设计系统 Ant Design 采用的就是 24 栅格。
网页设计栅格化系统 第2篇
在实际项目中，流动栅格和固定栅格的组合使用也是比较常见的做法，一些后台系统设计、工具型的界面设计会较经常使用混合栅格的形式, 混合布局既有固定的内容宽度，也有流动的宽度，灵活性更高，对与内容复杂的产品十分友好。
典型案例：Ant Design Pro
优点：
容器承载内容灵活性高，不同分辨率下都能达到较为理想的视觉效果；
缺点：
规则复杂，实现成本高；
最后再来总结下栅格系统在使用过程中一些使用要点：
事物都有两面性，我们使用栅格系统为设计提供便捷，目的是更好的达到目标，但不是为了限制设计，所以在实际设计过程中，应当谨慎考虑规范细则的制定。关于栅格的一些基础知识的总结就到这啦，敬请期待「秩序之美（下）」给大家分享栅格在 b 端工具型产品中的实际应用案例～
欢迎关注公众号「酷家乐用户体验设计」
网页设计栅格化系统 第3篇
网格（Gird）的基本构成就是单元格，由格子组成网，形成网格。最小单元格是界面的单位基础，所有界面元素都按照这个基础单位布局分布，它对于创造性的决策具有重要的指导意义。
通常，我们利用 8 作为最小单元格建立网格。
使用 8 的倍数来定义模块的间距与元素的尺寸。
那么为什么是 8，而不是别的数字？原因如下：
a.偶数思维：8 作为偶数，能适应市面上绝大多数设备屏幕，更为普适。在输出各种倍图时也能保证尺寸不出现奇数以及 、 等次像素的出现（iOS 导出 1、2、3 倍图，Android 导出 1、、2、3、4 倍图均为偶数）。
b.规律性：所有元素以 8 像素为步进单位，利用 8 或 8 的倍数规范元素和间距大小，（例如使用 4、8、16、24、32 等和 8 具有规律关系的数字）有规可循。
c.节奏感：相比于 6、10 等数字，以 8 为单位，在视觉感受上既不显得过于琐碎，也不会因为间隔太大而显得内容分散，更容易保证页面效果的协调性。
d.目前市面上众多开源代码也都以 8 的倍数作为默认设计大小，可行性已经得到多轮过验证，设计师在与开发对接过程中对页面有较为统一的理解，有效降低合作成本，在设计还原度上也更有保障。
划重点：注意这里给的是建议尺寸，最小单位的制定还需要结合具体的使用场景来决定，我们以解决问题为最终目的。
网页设计栅格化系统 第4篇
网页栅格体系是从平面栅格体系中发展出来的，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息排列。栅格系统能够根据产品和各种设备尺度需求来调整网络布局已达到完美的适配和呈现。
如上图所示，栅格系统还有一种定义也是编排设计中最行之有效的设计方式之一，就是“以规则的网格阵列来指导和规范网页中的版面布局以及信息分布”，栅格网络可以协调和平衡版面构成元素之间的关系，让整个版面更加立体化和更具有规划性。尤其是在连续系列的版面设计中，栅格系统通过变换文字排版、图像位置等主要编排要素的方式，可以非常轻松的将版面编排出统一协调的效果。
如上图所示，栅格最重要的作用就是约束版面，使编排的过程有可遵循的章法，合理的网格结构能够帮助我们在设计时掌握明确的版面结构，这一点在文字的编排中尤为明显。
栅格系统对版面划分要求比较高，经常可以看见有一些千篇一律、呆板而缺乏变化的版面，视觉上显得过于刻板，如果运用栅格系统来参与版面划分排列，就可以通过组合单元格、变化栏目数目或是局部栅格数量的调整，将整个版面润色呈现出一个丰富的效果。栅格系统可以根据版面上信息内容的不同来适当的调整，这也是它的灵活性的体现。
网页设计栅格化系统 第5篇
注意栅格区域不一定是画布的全部区域，我们可以先将页面按照功能模块划分为全局控制层、内容层、背景层、临时层。通常我们大多是对内容层进行栅格化。
通常 web 端常用的三种布局如下图所示，建议按照实际使用场景灵活的选择布局形式后，再确定需要栅格化的区域。
当我们遇到一个 web 端的内容浏览类网站，一般会采用上下布局，通常会基于 1920 或 1440 尺寸作为设计稿宽度，但由于需要适配主流尺寸中的最小尺寸，核心内容展示会控制在 1024（这里不是绝对值，不同产品根据实际情况数字会有上下浮动），其他空白区域即为安全边距，这是 web 网页中常见的一种适配方案。
网页设计栅格化系统 第6篇
流动栅格中页面边距和内容间距固定不变，页面内容随着页面尺寸变化而变化，可以是增删边缘元素展示个数，可以是调整元素展示比例，最终效果是始终保持内容卡片横向充满屏幕可用空间，这种弹性布局能更好的适应不同分辨率体现到栅格上，页面边距和水槽宽度是固定不变的，列数在适配过程中也是固定不变的，拉伸过程中的实际列宽是通过栅格区域的百分比缩放而来，这时列的宽度就不一定最小单位的倍数了。
典型案例：百度图片、花瓣
优点：
可以兼容不同尺寸的卡片混排；
页面边距也能保持一致，拉伸过程中过渡平滑，不显得突兀；
缺点：
页面伸缩时，不可避免的会出现卡片尺寸忽大忽小；
网页设计栅格化系统 第7篇
边距（Margin）有时候也会被叫安全边距，是指设计内容距离屏幕边缘的距离，顾名思义，安全边距内是禁止放内容的，可以类比为平面设计里的出血概念，主要用来控制屏幕核心内容的展示边界。
边距值越小，界面核心内容的有效利用空间越大，布局相对来说会比较宽松，相反，边距值越大，两边留白大呼吸感强，但有效利用区域相对小，内容排布相对更紧凑，也可能会容易拥挤。这里建议界面的边距可以根据屏幕尺寸做适配，通过断点响应变化，这样可以更好的保证在不同屏幕上界面呼吸节奏都相对舒适。