1 引言

这次简单介绍Element-ui的基础布局，让同学们初步了解element-ui。

2 方法

通过基础的 24 分栏，迅速简便地创建布局。

基础布局的定义：使用单一分栏创建基础的栅格布局。
通过 row（行） 和 col （单元格）组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

分栏间隔：分栏之间存在间隔。
Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

混合布局的定义：不按单一分栏创建基础的栅格布局。即在通过 row（行） 和 col （单元格）组件，并通过 col 组件的 span 属性来自由的布局。与基础布局的区别在于在同一个<el-row></el-row>下中的span属性并不相同。

修改分栏间隔：

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

3 结语

针对Element-ui问题的基础布局及混合布局方法，通过在编译器的实验，简单说明了两个布局如何设置，让同学们初步了解了Element-ui。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）