这次谢谢自己对css3grid布局的感悟23333
什么时候会用到grid布局，如遇到一个二维布局的时候，那么grid布局比较合适，而对于一位布局，flex布局比较合适，那什么是一维布局，什么是二维布局呢？
打开 https://www.mi.com/ 小米官网，其实你可以看到很多，例如：
这实际上就是个一维布局，当然你也可以使用二维布局
这实际上就是个典型的二维布局，可以轻松使用二维布局实现
二维布局，就是grid布局，也就是栅格布局，这就是我要讲的内容。
一般来说，对于grid布局，只要掌握五个属性就可以了：
1. display:grid
这是必须的，表示启用grid布局
2. grid-template-columns
这个属性设置的是 列的数目和列的宽度分布的
假如你想设置5列，并且每列的宽度相等，那么可以这么设置：
grid-template-columns：1fr 1fr 1fr 1fr 1fr
fr表示分数，以前使用的是百分数，但是因为有除不尽的情况，所以使用分数比较好理解，其实，fr你也可以理解为比例
1fr 1fr 1fr 1fr 1fr => 1:1:1:1:1
如果你想实现宽的比例是2:1:1:1:1,那么可以这么写：grid-template-columns：2fr 1fr 1fr 1fr 1fr
如果你想实现宽的比例是1:2:1:1:1,那么可以这么写：grid-template-columns：1fr 2fr 1fr 1fr 1fr
可能你会觉得，这么写很麻烦，其实可以简写为：
grid-template-columns：1fr 1fr 1fr 1fr 1fr =>grid-template-columns：repeat(5,1fr)
3. grid-template-rows 用法实际上和 grid-template-columns 是一样的，不做过多讲解
4. grid-auto-rows
这个属性一般用在当高度你不确定或者说高度是自适应的时候，就会用到这个属性。
如果 grid-auto-rows : 100px ,就表示每一行就是 100px
5. grid-gap 就是 行和列之间的间隔
对于萌新来说，这5个属性基本上够用了
可以很轻松就可以实现grid布局