CSS 网格布局
网格布局是一个二维布局系统，允许开发者以行和列的形式创建灵活的网络，并将内容放置在网络的单元格中。有些元素可能只占据网络的一个单元，另一些元素则可能占据多行或多列。
网格的大小既可以精确定义，也可以根据自身内容自动计算。既可以将元素精确地放置到网络的某个位置，也可以让其在网格内自动定位。
1 网格的组成部分
将一个DOM元素设置为display:grid; 使其成为一个网格容器，它的子元素则变成网格元素。
图 网格布局示意图
网格容器：样式设置为display:grid;的元素。
网格元素：网格容器下的子元素。
网格线：构成了网格的框架，一条网格线可以水平或垂直（并且有对应编号，例如从左到右，是从编号1开始）。图中数字编号注明的框架线。
网格轨道：一个网格轨道是两条相邻网格线之间的空间。例如图中粉色和青色的部分。
网格单元：水平和垂直的网格轨道交叉重叠的部分。
网格区域：位于两条垂直网格线和两条水平网格线之间（由一个或多个网格单元组成）。
1.1 网格容器相关属性
| display | display: grid; 将元素设置为网格容器。 display: inline-grid; 将元素设置为行内块级网格容器。
图 网格容器与行内块级网格容器 |
| grid-template-* | grid-template-columns、grid-template-rows: 定义网格容器的轨道大小（列或行）。同时可以指定轨道数量。可以使用px、fr以及css函数（repeat()、minmax()）来定义。 grid-template-areas: 用于定义区域名称，每个字符串（用引号括起来）代表网格的一行。 |
| grid-auto-* | grid-auto-columns、grid-auto-rows: 定义自动生成的网格轨道（行或列）的大小。 grid-auto-flow: 自定自动布局的方式，可以是行优先(row，默认值)或列优先(column)。 还可以设置为dense，表示稍后出现较小的网格项时，尝试填充网格中较早的空缺。 |
| grid-gap | 定义行和列之间的间距。 是grid-row-gap和grid-column-gap的简写. |
表 网格容器的相关属性
| grid-[column|row]-[start|end] | grid-column-start、grid-row-start、grid-column-end、grid-row-end：网格项开始（结束）的网格线编号。 grid-column、grid-row: 是对应start和end的缩写，可以使用开始编号/结束编号、开始编号/span 行数（列数）来指定。 |
| grid-area | 指定网格项所占的自定义区域。（可以使用grid-template-areas 中定义的区域名称来指定。） |
| order | 表示网格项的层叠位置，值越小，网格项越靠前。 |
表 网格项目的相关属性
图 网格容器与项目的示意
第2个元素从水平网格线1到水平网格线2，从垂直网格线2到垂直网格线4。
第7个元素从水平网格线1开始，跨了2行，从垂直网格线1到垂直网格线3。
第7个元素与第2个元素有重叠，因为第二个元素的order值更大，所以其在上面。
注意：图中元素的顺序与代码中的顺序不同，图中元素1的位置位于元素7和元素2的后面。
1.2 网格线与区域的命名
1.2.1 网格线命名
记录所有网格线的编号很麻烦，可以给网格线命名，并在布局时使用网格线的名称，而不是编号。
1.同一个网格线可以用多个命名：
grid-template-columns: [left-start] 1fr 1fr [left-end right-send]1fr [right-start] 1fr;
/*left-start/ left-end 的简写*/
grid-column: left;
2.可以给不同区域命名同一个名称：
grid-template-columns: [row] 1fr 1fr [row] 1fr [row];
/*表示第1个叫row的网格线到第3个叫row的网格线 */
grid-column: row 1 / row 3;
1.2.2 区域命名
grid-template-areas: "title title ."
". . ."
". . .";
grid-area: title;
不同的区域可以同样的命名，但是同名区域必须相连。title . title 这样是错误的。
1.3 显式和隐式网格
使用grid-template-*定义网络轨道时，创建的是显式网络，但是有些网格元素仍然可以放在显式轨道外面，此时会自动创建隐式轨道以扩展网络，从而包含这些元素。
grid-auto-* 属性为隐式轨道指定大小。
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
上面两行都是用于创建一个弹性的网格轨道。不同点在于auto-fill与auto-fit。
| 定义 | 特点 | |
| auto-fill | 会尽量填满容器的宽度（或高度），同时确保每个网格项的大小不小于minmax指定的最小值。 |
|
| auto-fit | 会填满容器的宽度（或高度），尽可能插入更多的网格项，但是能确保每个项目项的大小不小于minmax指定的最小值。 |
|
表 auto-fill 与 auto-fit 的对比
图 auto-fill 与 auto-fit 效果图
当不指定网格上元素的位置时，元素会按照其布局算法自动放置。默认情况下，布局算法会按元素在按元素在标记中的顺序将其逐列逐行摆放。当一个元素无法在某一行容纳时，算法会将它移动到下一行，寻找足够大的空间容纳它。
grid-auto-flow 可以控制布局算法的行为。它的初始值时row，上面描述的就是这个值的行为。如果值为column，按元素在标记中的顺序将其逐行逐列摆放，当一个元素无法在某一列容纳，算法会将它移动到下一列。
图 布局算法row 与 column的对比
上面布局中，网格中出现了空白部分，可以在上面属性中加上一个关键字(dense)，它让算法紧凑地填满网格里的空白，但是可能会改变某些网格元素的顺序。加上这个关键字，小元素就会“回填”大元帅造成的空白区域。
图 布局算法加上dense的效果
1.4 对齐
justify-* 是设置水平方向的位置。align-* 是设置垂直方向的位置。
| 属性 | 作用于 | 对齐 | 常用属性值 |
| justify-items align-items | 网格容器 | 网格区域内的所有元素。 | stretch(默认值)：网格单元会拉伸以填满整个网格轨道。 start、end、center：网格单元对齐到网格轨道起始/结束/居中的位置。 self-start、self-end：网格单元对齐到自身的起始/结束(取决于writing-mode和direction等属性)边缘 align-items 还有baseline属性值，表示网格单元对齐到它们的基线。 |
| justify-content align-content | 网格容器 | 网格区域内的网格轨道。 | start(默认值)、end、center网格区域从容器起始/末尾/居中边缘开始排列。 stretch: 拉伸以填满（较少用） space-around: 网格轨道之间的空间相等，网格轨道距容器边缘的空间等于轨道之间空间的一半。 space-between: 网格轨道之间的空间相等，但网格轨道与容器边缘之间没有空间。 space-evenly: 网格轨道之间、网格轨道与容器边缘之间的空间相等。 |
| justify-self align-self | 网格元素 | 网格区域内的网格元素。 | 会覆盖justify-items 或align-items的值。 auto: 使用*-item属性的值。 start、end、center: 网格项对齐单元格的起始/结束/居中边缘。 stretch: 默认值。 |
表 网格内的对齐属性