制定栅格系统首先选择画布尺寸；确定栅格区域，将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区；网格设置，现在主流网格单元的尺寸为8px；栅格计算，常见栅格有12栅格和24栅格，栅格分的数量越多承载内容结构越复杂，展示信息更详细。
是运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性，栅格系统被逐渐应用到中。那如何制定栅格系统呢？
什么是栅格系统
网页栅格系统是从平面栅格系统中发展而来，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。
如何制定栅格系统
1. 选择画布尺寸
目前 pc 端主流的设备尺寸是 1920x1080、1366x768、1440x900、1280x720、1024x768，其中占比最大的设备尺寸为 1920x1080。
如果将较大的屏幕尺寸定义为基础的设计尺寸，虽然可以在设计稿中呈现更多的内容，但向较小屏幕尺寸适配时会出现显示不完整的情况。因此我们建议以较小的屏幕尺寸为设计尺寸，同时向大尺寸进行适配。
对于 saas 类产品而言，其用户设备比较广泛，可以选择 ant design 推荐的设计尺寸 1440x900（近些年来随着屏幕尺寸的增加，ant design 也将设计尺寸改为 1440x900，同时主字号调整为 14px ）。
2. 确定栅格区域
将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区。通常我们对内容区域进行栅格化。web 端的布局通常包括上下布局、左右布局、t 字形布局。建议按照业务场景的不同灵活地选择布局形式。
3. 网格设置
现在主流的网格单元的尺寸为 8 px， 如 ant design、zan design、arco.design 均选择 8px 作为最小的网格尺寸。因为目前主流的显示屏横向和竖向都可以被 8 整除，可以做到完美适配。但所有的设计都不是绝对的，我们在选择最小的栅格单元时，也可以根据业务需要选择 4px 作为最小的网格单位。
4. 栅格计算
pc 端常见的栅格有 12 栅格和 24 栅格，栅格分的数量越多可以承载更复杂的内容结构，展示更详细的信息。国内较为主流的企业级设计系统 ant design、element 均采用 24 栅格。
12 栅格：将页面分为 12 份，在流行的前端开发工具库 bootstrap 与 foundation 中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台。
24 栅格：将页面分为 24 份，变化更加灵活，适用于业务信息量大场景复杂的后台产品。
通常我们看到的各家系统对于栅格的名词各有不同，新手往往会迷失在这些名词中，其实虽然名词略有不同，但总体表达的意义和划分原则是一致的，大可不必在这些名词中纠结，这里我们对名词作一些解释。
注意事项
1. 尽量保证偶数思维
尽量保证偶数思维，所有的数值保持偶数思维，可以在放大缩小时保证页面不失真。
2. 字段元素的起始点必须落在 column 上
字段元素必须要落在 column 上，不要将字段元素的起始点落在水渠中。这样就违背了栅格的目的。
如何构建一套 b 端栅格体系？我总结了五个方面！
3. 可以让父级容器对齐栅格，子元素可以不落在栅格上
很多时候我们发现如果一味的将元素与栅格对齐，可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器，运用盒子的原理，只需要把父级元素和栅格对齐即可。
