栅格系统简单来说，栅格就是格子。它并没有多高深复杂，可以把他想象成一个个的格子组合起来，就很容易理解了，比如我们小时候用过的方格本，以及现在流行的像素本。所以栅格就是利用网格进行分类排版，由网格演变而来的另一种说法。使用栅格系统，能让你的设计具有正式感和规范感，还具有一种结构分明的设计感。那么栅格系统在设计中的运用必须遵循什么准则？栅格系统使用方法是什么？

栅格系统的应用准则

1.栅格系统的核心思想是：内容元素必须位于若干列上，可以任意分割，比如 6×2、3×4、4×3。

2.水槽内禁止放任何内容元素，内容元素应该要在列宽以内，而不能流出在水槽之外，这样会违背栅格化的目的。

3.父级元素对齐栅格，子级可以不完全对齐列

4.除非特意设计，否则不要在列之外区域放置元素

所有重要的内容都应该与总宽度相适应，有时候也不能把总宽度当作全部内容区域，还需给它设定一个内边距，此时它就充当起了留白的作用。不要在网格内部利用列宽当成内边距，而是要与网格最边缘保持对齐，利用网格外部的间距来当作留白区域。

栅格系统使用方法

栅格系统最主要的是学会如何在 UI 设计工作中去使用这套方法。在实际项目中去实操练习，熟练应用。

1.布局

根据需要，使用不同数量的栏，去排列组和我们想要的布局样式。以 6 栏为例，简单列了几种组合方式。如 1 排 1，1 排 2，1 排 3…,栏数越多，组合方式就越多，在设计中我们可以把常用的组合方式排列出来，后续设计中可以直接拿出来用，大大提升设计效率。

2.定义有意义的间距

栅格系统更多的解决了页面的基本骨架。但是页面元素之间的间距也需要我们有规律有节奏的去定义。比如我们的留白间距规则。很多设计师设置的数值都是一些无效数值，比如 4，8，12…这些间距之间的差异是很小的，让人很难看出组与组之间的亲密关系。所以！！一套有意义的间距数值是很有必要的。一般数值的设定为 XS、S、M、L、XXL 这五个数值，也就是最小间距、小间距、常规间距、较大间距、最大间距。就像我们买鞋子一样，就固定住了这几个尺寸，设计中的间距也一样，这样能让组与组之间区分更明显。让留白更有意义。同时也能让设计师们更加有默契，减少对基础间距设置的思考。

3.灵活使用栏与水槽

很多同学在刚学习栅格系统时，会让自己的设计元素，比如文字、图标去对齐、卡死栏目的边缘。这种使用方法是错误的。因为栏只是内容的承载容器，我们的设计元素在这个容器里的摆放是多样化的。我们需要去灵活使用，而不是非要让所有元素对齐在同一竖线上！！！！

栅格系统的使用一定要在平时多研究，多实操。我们可以找一些好多产品比如淘宝、支付宝、爱彼迎、pinterest 等产品的界面去研究他们的栅格系统，然后灵活的应用到自己的设计中。栅格系统看似简单，其实在刚开始学习的过程中一定会遇到很多困惑与挑战，只要我们坚持做下去，多练习就一定会掌握的。

栅格系统 是运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性，栅格系统被逐渐应用到网页设计中。那如何制定栅格系统呢？

什么是栅格系统

网页栅格系统是从平面栅格系统中发展而来，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。

如何制定栅格系统

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. 可以让父级容器对齐栅格，子元素可以不落在栅格上

很多时候我们发现如果一味的将元素与栅格对齐，可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器，运用盒子的原理，只需要把父级元素和栅格对齐即可。