概念
一、display 属性
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。当一个元素被设置为网格容器后，其子元素会按照网格布局的方式进行排列。当当前行无法容纳所有子元素时，表格会自动创建新的一行来容纳该元素
.grid-container {
display: grid;
}二、行、列
我们通过 grid-template-columns 和 grid-template-rows 属性来创建网格中的列、行。
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto; /* 创建四列、自动分配列宽 */
grid-template-rows: 100px 300px; /* 创建两行、一行100px、一行300px */
}网格元素的垂直线方向称为列（Column）。
网格元素的水平线方向称为行（Row）。
三、网格单元
一个网格单元是在一个网格容器中最小的网格， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。
四、网格元素
一个或多个网格单元构成一个网格元素。网格单元可以沿着行或列的方向扩展。网格元素的形状应该是一个矩形，也就是说你不可能创建出一个类似于"L"形的网格区域。
五、跨度
跨度指的是网格元素在横向或者纵向方向上跨越的网格单元数量。
我们可以使用span关键字来指定网格元素的跨度。也可以使用起止线来指定网格元素的跨度。
网格的默认跨度为 1。
六、间隔
网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。
您可以使用以下属性来调整间隙大小：
grid-column-gap: 指定列之间的间隙。grid-row-gap: 指定行之间的间隙。grid-gap: 同时指定行和列之间的间隙。
.grid-container {
display: grid;
grid-column-gap: 50px;
grid-row-gap: 50px;
grid-gap: 50px 100px;
}七、网格线
列与列，行与行之间的交接处就是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
下图则定义了四条纵向的网格线，以及四条横向的网格线：
网格线的编号顺序取决于文章的书写模式。在大多数语言中，编号从左开始。在阿拉伯语中，编号从右开始。
接下来我使用了 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性来演示如何使用网格线。
grid-column: 相当于grid-column-start和grid-column-end的简写属性。grid-row: 相当于grid-row-start和grid-row-end的简写属性。
/* 以下实例我们设置一个网格元素的网格线从第一列开始，第三列结束： */
.item1 {
grid-column: 1 / 3;
grid-column-start: 1;
grid-column-end: 3;
}
/* 以下实例我们设置一个网格元素的网格线从第一行开始，第三行结束： */
.item2 {
grid-row: 1 / 3;
grid-row-start: 1;
grid-row-end: 3;
}八、空间分配单位：fr
fr 代表 "fraction"（分数）， 是 CSS Grid 布局中特有的弹性长度单位，表示"网格容器中的一等份可用空间"。1fr 表示：
- 分配网格容器中的 1 份可用空间
- 与其他
fr单位按比例分配剩余空间
以下例子中：将容器分为三列，先分配250px给第一列，然后按照 1 : 2 的比例分配给第二列、第三列。
.grid-container {
display: grid;
grid-template-columns: 250px 1fr 2fr;
}九、自动定位
所有子项目都会把自己摆放到网格中，每个单元格中放一个。默认的流向是按行排列项目，网格会首先尝试在第 1 行的每个单元格中摆放项目。如果已经通过 grid-template-rows 属性创建了其他行，网格就会继续把项目摆放到这些行中。如果在显式的网格中没有足够的行用来摆放所有的项目，隐式的新行就会被创建出来。
更新日志
e7112-于