两个框架都是使用的 24 分栏系统来快速实现基础布局，在 Ant Design 中称之为 Grid 栅格，Element Plus 中称之为布局，在这篇对比的文章中我们统一称之为 Grid 栅格，请注意这里的 Grid 与 css 中的 grid 布局并不一样，实际上两个框架用的都是 flex 布局。
属性
栅格布局使用两个组件来实现，分别是的 Row 组件与 Col 组件。
Row
| Antd | Element | 说明 |
|---|---|---|
| align | align | flex 布局下的垂直排列方式 |
| gutter | gutter | 栅格间隔 |
| justify | justify | flex 布局下的水平排列方式 |
| — | tag | 自定义元素标签 |
| wrap | — | 是否自动换行 |
Col
| Antd | Element | 说明 |
|---|---|---|
| flex | — | flex 布局属性 |
| offset | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 |
| order | — | 栅格顺序 |
| pull | pull | 栅格向左移动格数 |
| push | push | 栅格向右移动格数 |
| span | span | 栅格占位格数，为 0 时相当于 display: none |
| xs | — | 窗口宽度 < 576px 响应式栅格 |
| — | xs | <768px 响应式栅格数或者栅格属性对象 |
| sm | — | 窗口宽度 ≥ 576px 响应式栅格 |
| md | sm | ≥768px 响应式栅格数或者栅格属性对象 |
| lg | md | 窗口宽度 ≥ 992px 响应式栅格 |
| xl | lg | 窗口宽度 ≥ 1200px 响应式栅格 |
| — | xl | ≥1920px 响应式栅格数或者栅格属性对象 |
| xxl | — | 窗口宽度 ≥ 1600px 响应式栅格 |
小结
两个框架都是用的 flex 布局来实现的栅格，既然是这样，那么 Ant Design 为什么有在 Row 组件中使用 Flex 组件呢？两个框架为什么都不使用 grid 布局呢？
为什么 Row 组件用 Flexbox？
- 一维横向排列更简单
- 响应式表现更自然
- 行业栅格系统通用做法
- 社区和历史兼容性更强
什么时候可以考虑 Grid？
- 复杂页面主布局
- 多区域复杂对齐
- 二维排版（行列交错）
参考链接：
发表回复