display:grid 一旦设置该属性，该标签将转换为块级元素
display:inline-grid 一旦设置该属性，该标签将转换为行内块元素
注意，设为网格布局以后，容器子元素（项目）的float、display：inline-block、display：table-cell、vertical-align和column-等设置都将失效。
定义行和列
grid-template-columns:用来指定列的宽度
grid-template-rows:用来指定行的宽度
属性中的值：
可以是具体的数值
也可以是百分比
还可以是fr关键字
还可以是auto
还可以用repeat函数
.main {
width:600px;
height:600px;
border:1px solid red;
margin:100px auto;
display:grid;
grid-template-columns:200px 200px 200px;
grid-template-rows:200px 200px 200px;
}
上述代码将会出现九宫格盒子
设置列与列之间的距离：
grid-column-gap
设置行与行之间的距离：
grid-rows-gap
简写格式：
grid-gap: 15px 13px; //行间距 列间距
设置单元格内容的对齐方式
justify-items:控制单元格内容在水平方向的上对齐方式：start|centerlend|stretch
align-items控制单元格内容在垂直方向上的对齐方式：start|centerlend|stretch
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部层中。
stretch:拉伸，占满单元格的整个宽度（默认值）。
简写格式：
place-items:<align-items><justify-items>;
设置整个区域内容在容器中的对齐方式
justify-content:控制整个内容区域在容器中的水平对齐方式
align-content:控制整个内容区域在垂直方向上的对齐方式
值（对齐方式）：start end center space-around space-between space-evenly stretch
简写格式：
place-content:<align-content> <justify-content>
给网格布局指定区域
grid-template-areas
例:
.container {
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
grid-template-areas:"a b c"
"d e f"
"g h i";
}
若想要两个单元格的合并成一个只需命名为同一个即可
若不想要给单元格命名则写上.即可
