1、网格容器
我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。
2、网格轨道
（1）我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。
// 几种写法
grid-template-columns: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 500px 1fr 2fr;
grid-template-columns: 20px repeat(6, 1fr) 20px;
（2）你也可以在隐式网格中用 grid-auto-rows 和 grid-auto-columns 属性来定义一个设置大小尺寸的轨道。
// 几种写法
grid-auto-rows: 200px;
grid-auto-rows: minmax(100px, auto);
3、网格线（缩写、默认跨度、反方向计数、span关键字、命名网格线布局）
（1）grid-column-start 和 grid-column-end 属性可以合并为 grid-column，grid-row-start 和 grid-row-end 则合并为grid-row。
（2）我们可以更进一步，给每个元素只定义一个属性 grid-area。值的顺序如下
* grid-row-start
* grid-column-start
* grid-row-end
* grid-column-end
4、网格区域（网格单元、命名网格区域、留出空白的网格单元、跨越多个网格单元、用媒体查询重新定义网格、简写、嵌套网格、使用z-index控制层级等）
（1）grid-template 属性可同时设置以下属性：
* grid-template-rows
* grid-template-columns
* grid-template-areas
（2）grid 简写方式更进一步，它包含了与隐式网格相关的属性，所以通过它可以同时设置以下属性：
* grid-template-rows
* grid-template-columns
* grid-template-areas
* grid-auto-rows
* grid-auto-columns
* grid-auto-flow
5、网格间距
在两个网格单元之间的 网格横向间距 或 网格纵向间距 可使用 grid-column-gap 和 grid-row-gap 属性来创建，或者直接使用两个合并的缩写形式 grid-gap。
6、CSS 网格布局中的自动定位 - 填充缺口
grid-auto-flow: dense;
7、网格布局中的盒模型对齐
（1）属性 align-self 和 align-items 用于控制项目在块方向的轴上对齐，通过设置这两个属性，可以改变网格区域中的项目的对齐方式。设置了 align-items 属性，就相当于为网格的所有子项目都设置了 align-self 属性，当然也可以为单独的某一个网格元素设置它的个性化的 align-self 属性。
（2）justify-items 和 justify-self 用于对齐项目到文本方向的列轴，可选值也和 align-self 一样。
（3）通过组合使用 align 和 justify 属性，让项目居于网格区域的正中就变得非常容易了。
参考：MDN - grid
