Grid布局
什么是Grid布局？
将网页分为一个个网格，对网格进行不同的操作，实现不同的效果
容器
采用网格布局的区域
项目
网格内部采用网格定位的元素，称为项目。项目只能是容器的顶层子元素
行和列
容器中的水平区域称为行row，垂直区域称为列column
单元格
行和列的交叉区域，称为单元格cell
网格线
划分网格的线，称为网格线grid line
n行有n+1条水平网格线，n列有n+1条垂直网格线
容器属性
display:grid
将容器设为网格布局，也可以设置行内元素为网格布局--display:inline-grid。
设置网格布局的区域，其内部项目的float、display:inline-block、display:table-cell、vertical-align、column-*都将失效
grid-template-rows和grid-template-columns
定义网格每一行的行高、每一列的列宽
可以使用绝对单位，也可以使用百分比
repeat()函数
第一个参数为重复的次数，第二个参数为重复的数组；也可以重复某种模式
autofill关键字
当单元格大小固定，而容器大小不固定时，使用autofill关键字可以使单元格自动填满
如：grid-template-rows:autofill 100px; 是指每个单元格的行高为100px，且默认填充容器直到最低端
fr关键字
方便表示比例关系。当两列的宽度分别为1fr和2fr，纳闷第二列宽度是第一列宽度的两倍
minmax()函数
表示长度范围，minmax(100px, 200px)就表示在100px到200px之间
auto关键字
表示由浏览器自己决定大小
网格线的名称
在设置grid-template-rows时，可以分别设置每条网格线的名称，以便之后引用，且可以为同一根网格线设置多个名称
grid-template-rows: [r1] 100px [r2] 100px [r3] 200px [r4]
grid-row-gap、grid-column-gap、grid-gap（目前不需grid-前缀）
grid-row-gap 设置行与行之间的距离
grid-column-gap 设置列与列之间的距离
grid-gap 以上两者的简写方式
gird-template-areas
将网格划分为多个区域，为每个区域指定名称，以便后面引用
如果某些区域不需要利用，则以‘.’代替
如: grid-template-areas:'a b c'
'd e f'
'g h i';
grid-auto-flow
在网格区域中，项目会按照顺序一个个放在网格中，默认是先列后行排列：grid-auto-flow:row
可以通过设置为grid-auto-flow:column，先列后行
grid-auto-flow:row dense 表示自动填满行
grid-auto-flow:column dense 表示自动填满列
justify-items、align-items、place-items
justify-items：设置单元格内容的水平位置 align-items：设置单元格内容的垂直位置
- start
- end
- center
- strech
place-items：align-items | justify-items 简写
justify-content、align-content、place-content
justify-content：设置整个内容区域在容器中的水平位置 align-content：设置整个内容区域在容器中的垂直位置
- start
- end
- stretch
- space-between
- space-around
- space-evenly 设置行或列之间的间距和其与边框的间距相等
place-content属性是align-content属性和justify-content属性的合并简写形式。
grid-auto-rows ，grid-auto-columns
表示多余的网格的行高和列宽
项目属性
grid-column-start ，grid-column-end ，grid-row-start ，grid-row-end
设置项目边框所在的网格线
可以使用span关键字，表示跨域 如：grid-row-start:span 2 表示跨越了两行
grid-row、grid-column
gird-row：grid-row-start ，grid-row-end的缩写
grid-column：grid-column-start，grid-column-end的缩写
使用‘/’隔开
grid-area
将项目放在指定的容器命名的区域中
也可以写成网格线的合并，形成一块区域 gird-area: 1 / 1 / 3 / 3 grid-row-start / grid-column-start / grid-row-end / grid-column-end
justify-self 属性，
align-self 属性，
place-self
设置某个单独的单元格的水平位置、垂直位置。以及两者的简写格式
