css3 gird布局

这次谢谢自己对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布局