一. 重要术语：
CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。
FlexBox：一维布局；
Grid: 二维布局;
Flexbox 和 Grid 能协同工作，而且配合得非常好
网格容器(Grid Container)
应用 display: grid 的元素。这是所有 网格项（grid item）的直接父级元素。在这个例子中，container 就是 网格容器(Grid Container)。
网格项(Grid item)
网格容器（Grid Container）的子元素（例如直接子元素）。这里 item 元素就是网格项(Grid Item)，但是 sub-item 不是。
网格线(Grid Line)
构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线。
网格轨道(Grid Track)
两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条 行网格线 之间的 网格轨道(Grid Track)。
网格单元格(Grid Cell)
两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。下图是第 1 至第 2 条 行网格线 和第 2 至第 3 条 列网格线 交汇构成的 网格单元格(Grid Cell)。
网格区域(Grid Area)
4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成。下图是 行网格线1和3，以及列网格线1和3 之间的网格区域。
Grid(网格)属性目录
网格容器(Grid Container)属性
- display
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- place-items
- justify-content
- align-items
- place-items
- justify-content
- align-content
- place-content
- grid-auto-columns
- grid-auto-rows
grid
网格项(Grid Items)属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
place-self
网格容器(Grid Container)属性详解
display
将元素定义为网格容器，并为其内容建立新的网格格式上下文
值：- grid: 生成一个块级网格
- inline-grid： 生成一个内联网格
.container{ display:grid | inline-grid; }grid-template-columns/grid-template-rows
使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。
值：- track-size：可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
- line-name: 网格线名称
.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
} 示例：
当你在 网格轨道(Grid Track) 值之间留出空格时，网格线会自动分配正数和负数名称：
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
但是你可以明确的指定网格线(Grid Line)名称，例如 line-name 值。请注意网格线名称的括号语法：
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start