【BFUI】组件实现：Grid 栅格

【版权声明】本文为 BFUI 组件库的故事，记录了关于不同组件的开发设计历程。参考引用或合理转载本文内容时，请标明文章出处和链接。维护开源环境，尊重开发者劳动成果，从你我做起。

关于栅格

栅格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性，使页面排版美观、舒适。

我们的栅格化系统基于弹性布局来实现，将区域进行了 24 等分。

我们学习了社区中优秀组件库的设计思路，以此来指导 BFUI 中该组件的开发，以下是调研总结：

同类型组件库	主要功能实现	说明
Ant Design	基础栅格，区块间隔，左右偏移，排版，对齐，排序，响应式，
Element-plus	基础布局，区块间隔，列偏移，对齐方式，响应式，断点隐藏	断点隐藏功能其他组件库似乎没有
Arco Design	基本用法，列偏移，对齐方式，排序，响应式
TDesign	基本使用，区块间隔，左右偏移，排序，次序，水平和垂直对齐方式，响应式	选择了 12 等分，而不是 24 等分
Vant	基础用法，间距，对齐方式
iView	基础用法，区块间隔，顺序，排序，左右偏移，响应式
DevUI	基础用法，对齐，间隔，填充，左右偏移，响应式，排序

使用什么实现栅格布局？^[1]

Flex 弹性布局可以实现
弹性盒子哪个属性可以实现指定占位格数？

通过 flex: 0 0 50%; 来设置宽度百分比，这样可以实现指定宽度。注意虽然 flex-grow: 0; ，但为了防止被内容撑开，还需要加上 max-width: 25%; 来限制最大宽度。
CSS 设置了 flex-basis 并且 flex-grow 等于0，但仍然被撑开怎么办？^[2-3]
设置 min-width: 0; 即可，因为在弹性布局中，一个 flex 子项的最终尺寸是基础尺寸(或内容尺寸)、弹性增长或收缩、最大最小尺寸共同作用的结果。最终尺寸计算的优先级是：

最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
- 基础尺寸由 flex-base 属性或 width 属性，以及 box-sizing 盒模型共同决定；
- 内容尺寸最指最大内容宽度，当没有设置基础尺寸是会顶替基础尺寸的角色；
- 弹性增长指的是 flex-grow 属性，弹性收缩指的是 flex-shrink 属性；
- 最大尺寸主要受 max-width 属性限制；最小尺寸则比较复杂，受最小内容宽度、width 属性和 min-width 属性共同影响。
区块间隔如何设置？分别给 Row 和 Col 组件添加什么样式？

可参考 Element 源码，让 Row 和 Col 通过 provide /inject 方式^[4-6]进行组件通信，传递 Row 组件的 gutter 参数值，来使组件计算出对应的 margin 或 padding 值。