Grid网格布局

Grid 布局介绍

Grid布局是一个二维布局方法，纵横两个方向总是同时存在。

网格布局横纵划分

语法：
grid-template-columns：设置行数
grid-template-rows：设计列数
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单
位(网格剩余空间比例单位)。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用
repeat(语法进行简化操作。

操作演示
首先我们创建一个父容器并设置宽高
然后再父容器中创建9个子容器如下图所示

此时效果如下图所示

然后我们在父容器的CSS样式中添加代码
display：grid
使其成为一个网格
然后分别用代码
grid-template-columns
和
grid-template-rows
分别为网格设置列数与行数如下图所示

我们给子容器的div加一个边框让它更容易观察
如上图所示，我们给grid-template-columns分别添加了三个值：
100px 100px 300px （中间用空格隔开）
那么这个网格会被分成三列并且每一列的宽度与三个值相对应。
同理
grid-template-rows
的三个值代表这个网格被分成三行
并且每一行的高度与添加的值相对应。
效果如下图所示

fr单位

fr是一个比例单位
有多少fr横向或者纵向就会被分成多少等份


如上图所示，宽度一共6fr 宽是600px，那么一份 fr 就是100px，
3fr 就是300px。