grid-template-columns | 基于列的维度，去定义网格线的名称和网格轨道的尺寸大小 | grid-template-columns: 1fr 2fr; |
grid-template-rows | 基于行的维度，去定义网格线的名称和网格轨道的尺寸大小 | grid-template-rows: 100px 100px; |
row-gap | 设置行与行的间隔（行间距） | row-gap: 10px |
column-gap | 设置列与列的间隔（列间距） | column-gap: 10px |
gap | row-gap与column-gap的合并写法，语法：gap: <row-gap> <column-gap>，如果省略第二个值，则表示第二个值等于第一个值 | gap: 10px 20px |
grid-template-areas | 网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成，用于定义区域，如示示例所示，9个格子分别用字母来表示所在区域 | grid-template-areas: a b c d e f g h i |
grid-auto-flow | 控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排，默认为row ，按行排列，从左到右，也可以指定为column，表示按列排列。 | grid-auto-flow: column |
justify-items | 单元格内容的水平位置（左中右） | justify-items: center |
align-items | 设置单元格内容的垂直位置（上中下） | align-items: center |
place-items | 是align-items属性和justify-items属性的合并简写形式，语法：place-items: <align-items> <justify-items>;，如果省略第二个值，则浏览器认为与第一个值相等。 | place-items: start end; |
justify-content | 整个内容区域在容器里面的水平位置（左中右） | justify-content: start |
align-content | 整个内容区域的垂直位置（上中下） | align-content: start |
place-content | 是align-content属性和justify-content属性的合并简写形式，语法：place-content: <align-content> <justify-content>，如果省略第二个值，浏览器就会假定第二个值等于第一个值。 | place-content: space-around space-evenly; |
grid-auto-columns | 指定了隐式创建的网格纵向轨道的宽度 | grid-auto-columns: 1fr; |
grid-auto-rows | 指定隐式创建的行轨道大小 | grid-auto-rows: 50px; |
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元素列起始的网格位置 | grid-column-start: 1 |
grid-column-end | 指定grid元素列结束的网格位置 | grid-column-end: 2 |
grid-row-start | 指定grid元素行起始的网格位置 | grid-row-start: 2 |
grid-row-end | 指定grid元素行结束的网格位置 | grid-row-end: 2 |
grid-column | 是grid-column-start和grid-column-end的合并简写形式，语法：grid-column: <start-line> / <end-line>; | grid-column: 1 / 2 |
grid-row | 是grid-row-start和grid-row-end的合并简写形式，语法：grid-row: <start-line> / <end-line>; | grid-row: 1 / 2 |
grid-area | 指定项目放在哪一个区域。还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。 | grid-area: e |
justify-self | 设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目 | justify-self: start |
align-self | 设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。 | align-self: start |
place-self | 是align-self属性和justify-self属性的合并简写形式。语法：place-self: <align-self> <justify-self>;，如果省略第二个值，place-self属性会认为这两个值相等。 | place-self: center center; |
