grid布局基本概念
- 采用网格布局的区域，称为"容器"（container）。
- 容器内部采用网格定位的子元素，称为"项目"（item）。
- 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
- 行和列的交叉区域，称为"单元格"（cell）。
- 划分网格的线，称为"网格线"（grid line）。
- 水平网格线划分出行，垂直网格线划分出列。
- 正常情况下，
n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。
容器属性
display属性
指定一个容器采用网格布局。
display: grid指定一个容器采用网格布局。display: inline-grid将容器元素设置为行内元素。
grid-template-columns属性和grid-template-rows 属性
容器指定了网格布局以后，接着就要划分行和列。
grid-template-columns属性定义每一列的列宽grid-template-rows属性定义每一行的行高。
- repeat()
- auto-fill 关键字
- fr 关键字
- minmax()
- auto 关键字
- 网格线的名称
- 布局实例
grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-auto-flow 属性
- 这个顺序由
grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。 grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
justify-items 属性， align-items 属性， place-items 属性
justify-items属性设置单元格内容的水平位置（左中右）align-items属性设置单元格内容的垂直位置（上中下）place-items属性是align-items属性和justify-items属性的合并简写形式。
justify-content 属性， align-content 属性， place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右）align-content属性是整个内容区域的垂直位置（上中下）。place-content属性是align-content属性和justify-content属性的合并简写形式。
grid-template 属性， grid 属性
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。grid属性是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
项目属性
grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
grid-column 属性， grid-row 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-area 属性
grid-area属性指定项目放在哪一个区域。
justify-self 属性， align-self 属性， place-self 属性
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。place-self属性是align-self属性和justify-self属性的合并简写形式。
