1. Grid布局是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
2. 为实现瀑布流先介绍以下几个属性：
display:设置为grid指明当前容器为Grid布局
grid-template-columns: 定义每一列的列宽
grid-template-rows: 定义每一行的行高
column-gap：用于设置列间距qi
其中 grid-template-columns和grid-template-rows，可以使用绝对单位，也可以使用百分比。并且为了表示比例关系，Grid布局提供了fr关键字，如果设置1fr和2fr，表示后者是前者的两倍。
3. 为实现瀑布流再介绍几个属性：
grid-row-start：上边框所在的水平网格线
grid-row-end：下边框所在的水平网格线
grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
这4个属性可接收如下属性：
auto：表示自动放置
自定义名称：可以给予网格线一个名称，并在此处引用(本文并不涉及)
网格线索引: 代表第几条网格线(从1开始)
span + 数字 : 表示上下边框或左右边框跨越多少网格
那么什么是网格线呢?
划分网格的线，称为网格线。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
4. 介绍另一个属性：
grid-auto-rows：用来设置多余网格的行高
代码: