Gird 语法
// Grid items have an initial size of min-width: auto and min-height: auto.
// minmax(0, 1fr)
// overflow: hidden
// 单元格滚动：overflow: auto;
// 使用 grid 布局注意为了网格行对齐，会拉伸内容，使用 fr 单位的行会占据这些空间
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
网格容器 // 注: column, float, clear, 和 vertical-align 元素对网格容器不起作用。
网格项
网格线
网格轨道（行，列）
网格单元格
网格区域
容器的属性：
grid-template-columns/rows: ... | ... | subgrid;
grid-template-columns: repeat(3, 20px [col-start]) 5%;
subgrid: 最简单的关系是将子网格的网格轨迹沿着单个轴锁定到父网格的轨道上，同时保持沿另一个轴的轨道分离
grid-template-areas: " | . | none | ..."
"..."；
网格区域重复的名称就会导致内容跨越这些单元格。句点（任意数量）表示一个空单元格。语法本身提供了一种可视化的网格结构。
grid-column-gap 和 grid-row-gap指定网格线的大小。你可以把它想像成在行/列之间设置间距宽度。间距仅仅在列/行之间产生，而不会在边缘区。简写：
grid-gap: ;
justify-items 沿列轴对齐网格项中的内容(相反于align-item属性定义的沿行轴对齐)。此值适用于容器内所有的网格项。
justify-items: stretch;
justify-content 将网格整体沿列轴相对于容器进行对齐(相反于align-content属性定义的沿行轴对齐)。
- start: 网格与网格容器的左端对齐
- end: 网格与网格容器的右端对齐
- center: 网格处于网格容器的中间
- stretch: 调整网格项的大小，使其宽度填充整个网格容器
- space-around: 在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半
- space-between: 在网格项之间设置偶数个空格间隙，其最边缘不存在空格间隙
- space-evenly: 在网格项之间设置偶数个空格间隙，同样适用于最边缘区域
grid-auto-columns 和 grid-auto-rows：指定任何自动生成的网格轨道(隐式网格跟踪)的大小。当你显式定位行或列(使用 grid-template-rows/grid-template-columns 属性)时,就会产生超出定义范围内的隐式网格轨道。
grid-auto-flow：如果你不显式的在网格中放置网格项，自动布局算法就会自动踢出此网格项。此属性用来控制自动布局算法的工作原理。
- row: 告诉自动布局算法填充每一行，必要时添加新行
- column: 告诉自动布局算法填充每一列，必要时添加新列
- dense: 告诉自动布局算法试图填补网格中之前较小的网格项留有的空白
网格项的属性：
grid-area ： 给网格项进行命名以便于模板使用grid-template-areas属性创建时可以加以引用。另外也可以被grid-row-start + grid-column-start + grid-row-end + grid-column-end属性更为简洁的加以引用。
justify-self: 网格单元格对其方式
grid-column-end: | | span | span | auto
grid-row-start: | | span | span | auto
: 可以是一个数字来引用相应编号的网格线，或者使用名称引用相应命名的网格线 - span
: 网格项包含指定数量的网格轨道 - span
: 网格项包含指定名称网格项的网格线之前的网格轨道 - auto: 表明自动定位，自动跨度或者默认跨度之一
如果没有声明grid-column-end/grid-row-end属性，默认情况下网格项的跨度为1。网格项可以互相重叠。可以使用z-index属性控制堆叠顺序。简写：
grid-column/grid-row ： / | / span ; 或者：
grid-area: | / / / ;