CSS Grid 网格布局（入门）
Flexbox 是为一维布局设计的，而 Grid 网格布局是二维布局，跟以前的 table 表格布局类似。
CSS Grid 网格布局 - 重要术语
1.网格容器
元素属性设置为 display: grid; ，则称这个元素为网格容器。
2.网格项
网格容器的直接子元素称为网格项。直接子元素里面的元素不算网格项。
3.网格线
n行有 n + 1 根行网格线，m列有 m + 1 根列网格线。
2列3行，就有3条列网格线、4条行网格线。
以下图中红色线就是一条列网格线。
4.网格轨道
类似 table 的行和列。两个相邻的网格线之间为网格轨道，也就是网格的列或行。
如上图中的 “1”，“2”，“3” 合成一条行轨道。一共有3个行轨道，3个列轨道。
5.网格单元
类似 table 的 td，两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，是最小的网格单元。
有时候网格单元数量并不等于网格项。
6.网格区
网格区域是由一个或者多个网格单元格组成的一个矩形区域。
CSS Grid 网格布局 - 重要属性
| 属性 | 描述 | |
| 设置在网格容器上 | ||
| display | display | grid 或者 inline-grid 声明元素为网格容器 |
| 行和列 | grid-template-columns | 设置网格列 |
| grid-template-rows | 设置网格行 | |
| 网格排序 | grid-auto-flow | 设置网格项如何排序 |
| 网格对齐 | justify-content | 网格在网格容器的水平方向如何对齐 |
| align-content | 网格在网格容器的垂直方向如何对齐 | |
| place-content | 简写:<align-content> <justify-content> | |
| 网格单元对齐 | justify-items | 网格项在网格单元的水平方向如何对齐 |
| align-items | 网格项在网格单元的垂直方向如何对齐 | |
| place-items | 简写:<align-items> <justify-items> | |
| 网格单元间距 | grid-row-gap | 设置行间距 |
| grid-column-gap | 设置列间距 | |
| gap | 简写：<grid-row-gap> <grid-column-gap> | |
| 默认尺寸 | grid-auto-columns | 指定未设置尺寸的列的宽度 |
| grid-auto-rows | 指定未设置尺寸的行的高度 | |
| 网格区域 | grid-template-areas | 设置网格区域 |
| 设置在网格项上 | ||
| 网格项定位 | grid-column-start | 网格项在第几根列线上开始 |
| grid-column-end | 网格项在第几根列线上结束 | |
| grid-row-start | 网格项在第几根行线上开始 | |
| grid-row-end | 网格项在第几根行线上结束 | |
| grid-area | 网格项定位于哪个区域 | |
| 网格项对齐 | justify-self | 网格项在网格单元的水平方向如何对齐 |
| align-self | 网格项在网格单元的垂直方向如何对齐 | |
