一、容器属性
1、display:grid/inline-grid;
设置容器元素，分别是块级和行内元素
2、grid-template-rows、 grid-template-columns
对应每行\列的高\宽
// 3*3
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
（1）除了使用绝对单位，也可以使用百分比。
（2）可以使用repeat()函数简化
display:grid;
grid-template-rows: repeat(3,33.3%);
grid-tempalte-columns:repeat(3,33.3%);
（3）fr关键字
相当于flex布局中项目的flex:1/2/3这种倍数，不同的是flex布局是写在子项目中，grid是写在容器上面
（4）auto-fill关键字
单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
display:grid;
grid-template-rows: repeat(3,100px);
grid-tempalte-columns:repeat(auto-fill,80px);
（5）minmax()函数
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
display:grid;
grid-template-rows: repeat(3,100px);
grid-tempalte-columns:1fr 1fr minmax(100px,1fr);
（6）auto关键字
auto关键字表示由浏览器自己决定长度 自适应
（7）网格线的名称
用[]来为网格线命名，nm网格，有(n+1)(m+1)根线
display:inline-grid;
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]
grid-tempalte-columns: [c1] 1fr [c2] 1fr [c3] 1fr [c4];
3、grid-row-gap grid-gap grid-column-gap
前缀grid可省略
4、grid-template-areas
划分区域
一个区域由单个或多个单元格组成
某些区域不需要利用，则使用"点"（.）表示
所以可以多个单元格合并为一个区域，例如
display:grid;
grid-template-columns: 50px auto 150px;
grid-template-rows: 200px 500px 100px;
grid-template-areas: "header header header"
". main siderbar"
"footer footer footer";
