做了件有意义的小事

在前面关于 grid 布局写了 3 篇文章：

第8天：布局翘楚 - Grid 布局概述

第10天：买一块地盖一处院子

第11天：grid布局对齐属性

从这三篇文章中你能够感受到 grid 布局的强大之处，相比 FlexBox 布局，它更灵活。gird 布局其实就是一张”excel 表格“，你所做的就是把不同元素放到这张表格中，每个元素可占用任意个单元格。总之，这种二维布局更灵活。

在看 element-ui 的时候，发现它也提供了一种类似于 grid 的布局方式，不过它底层使用的是 flexbox 布局，用起来非常方便，如果你还没用过，强烈推荐用一下。

比如实现类似于这种布局：

<el-row :gutter="20">
  <el-col :span="16"><div></div></el-col>
  <el-col :span="8"><div></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div></div></el-col>
  <el-col :span="8"><div></div></el-col>
  <el-col :span="4"><div></div></el-col>
  <el-col :span="4"><div></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="4"><div></div></el-col>
  <el-col :span="16"><div></div></el-col>
  <el-col :span="4"><div></div></el-col>
</el-row>

grid 布局千好万好，但初学者学起来并不容易，今天我在前端小课网站中实现了一个带交互的 grid 布局，你可以动动手指即能够看到布局的具体表现。

比如关于行列的定义，你可以在输入框输入不同的值来实时看到不同的布局效果：

关于布局区域，我当时学的时候还特意写了一篇故事 第10天：买一块地盖一处院子，今天我们再用上可视化，效果更佳：

关于元素的对齐方式，也能够帮你更直观地看到布局效果：

总之，我觉得这是一件很有意义的事情，有兴趣的朋友可以在前端小课网站体验：https://lefex.gitee.io/。

关于 flexbox 布局，可以看 带交互的 flex 布局教程，不懂都难。大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/