网格布局
网格布局的API
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。
Grid 布局远比 Flex 布局强大。
弹性布局（flex）和 网格布局（grid）的区别
：
-
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
-
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
一、基本概念
采用网格布局的区域，称为"容器"。容器内部采用网格定位的子元素，称为"项目"。项目只能是容器的顶层子元素，不包含项目的子元素。
以下面代码为例：ul 是容器，li 作为 ul 的子元素是项目。p 元素是项目的子元素而不是项目。
<ul>
<li>1</li>
<li>2</li>
<li><p>3</p></li>
</ul>
二、设置 Grid 布局
首先要选定网格盒子。任何一个容器都可以指定为 Grid 布局：
div {
display: grid;
}
行内元素也可以使用 Grid 布局：
div {
display: inline-grid;
}
设为 Grid 布局以后，容器子元素（项目）的 “float、display: inline-block、display: table-cell、vertical-align 和 column-*” 等设置都将失效。
三、父元素设置的属性
以下 6 个属性设置在容器上：
-
grid-template-columns：定义每一列的列宽
-
grid-template-rows：定义每一行的行高
-
grid-row-gap：设置行与行的间隔（行间距）
-
grid-column-gap：设置列与列的间隔（列间距）
-
grid-gap：是 grid-column-gap 和 grid-row-gap 的合并简写形式
-
grid-template-areas：用于定义区域
-
grid-auto-flow：设置子元素的排列顺序
-
justify-items：设置单元格内容的水平位置（左中右）
-
align-items：设置单元格内容的垂直位置（上中下）
-
place-items：是 align-items 和 justify-items 的合并简写形式
-
justify-content：是整个内容区域在容器里面的水平位置（左中右）
-
align-content：是整个内容区域的垂直位置（上中下
-
place-content：是 align-content 和 justify-content 的合并简写形式
-
grid-auto-columns：设置浏览器自动创建的多余网格（留白）的列宽
-
grid-auto-rows：设置浏览器自动创建的多余网格（留白）的行高
-
grid-template：是 grid-template-columns、grid-template-rows 和 grid-template-areas 这 3 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
-
grid：是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这 6 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
四、自身设置的属性
-
grid-column-start：左边框所在的垂直网格线
-
grid-column-end：右边框所在的垂直网格线
-
grid-column：是 grid-column-start 和 grid-column-end 的合并简写形式
-
grid-row-start：上边框所在的水平网格线
-
grid-row-end：下边框所在的水平网格线
-
grid-row：是 grid-row-start 和 grid-row-end 的合并简写形式
-
grid-area：指定项目放在哪一个区域
-
justify-self：设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目
-
align-self：设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
-
place-self：是 align-self 和 justify-self 的合并简写形式
【参考文档】：
CSS Grid 网格布局教程
网格布局
