注：因知乎上传gif压缩严重，几乎看不出啥，因此贴上notion链接，查看动图很清晰哦。

https://www.notion.so/a3bb6564aa1a4bc99e3022e5c003c13d​www.notion.so

哈喽啊，大家好啊，采矿工又来了！这次给大家带来的是一个栅格系统的应用实例分享，不对的地方还请大家指正！<O_O>

介绍实例之前，先讲一个后台系统中常见的组件：查询面板。

关于查询面板的爱恨情仇

查询面板这东西，一般长这样：

关于它的设计，真是一言难尽。我大致罗列了以下几种情况：

• 一或两个查询项 + 按钮
• 多个查询项 + 按钮
• 某些查询项长短不一，造成与其他查询项无法对齐，排布混乱

先来讲讲我们UED团队遇到的趣事

首先，我们UED的同学定了规则：查询项居左布置，按钮居右布置。可是针对一至两个查询项的实际效果，老板有意见了：

于是，UED同学们将方案改成了如下所示，同时，制定了新规则：查询按钮跟着查询项的屁股后面跑！

问题解决！

N天后，老板又来了：你们这查询面板，查询项多少不一的情况下，这按钮的位置不一致，不舒服！你们参考参考其他产品，比如 antdesign，弄个优化方案！

于是，UED队伍动用所有队员力量，经过N次重大会议，制定新的规则如下：

• 单行查询面板，按钮跟着查询项屁股后面跑
• 多行查询面板，按钮固定在最右侧
• 为了美观，按钮独占一列

问题貌似又得到了解决……

某天，另一个老板找上了门：

UED团队陷入沉思之中……

引入栅格系统

老板给我们发工资，得听老板的！于是，我们绞尽脑汁，由某位小弟（me）提出了一个方案：引入栅格系统。

经过慎重考虑，我们引入了24栅格系统，如下所示：

并做了如下规定：

• 将查询项、按钮都当成一种元素：块
• 每一个块，默认占屏幕宽度 1/3
• 每一个块，可以自由调整所占栅格的格数
• 每个块按照自上而下，自左向右流式布局
• 按钮可以设置居左 / 居右显示

设置界面如下：

经过和开发哥哥们多轮PK，我们实现了我们的想法。下面，将详细演示，栅格系统是如何作用于查询面板的：

1、单行查询面板

按钮默认左对齐，同时跟着查询项屁股后面跑

2、单行变多行

通过调整按钮块元素所占栅格格数，配合对齐方式设置，可实现按钮左右布局效果

3、调整单个块元素的宽度

支持对单个块元素所占栅格格数调整，实现宽度调整

4、继续增加查询项

当查询项宽度不一时，通过调节块元素宽度，最大化节省空间

5、改变按钮对齐方式

满足老板们不同要求，按钮跟着跑？固定？都行！

小伙伴们看明白了么<O_O>。目前，此组件及设置方式已成功应用在我们的一个项目之中。同时，我们也将此查询面板作为一个解决方案，存入了我们的方案库中。

以上就是关于栅格系统的一个应用实例，若有不正确的地方，还请小伙伴们指正！