单词：
- grid：网格、栅格
- row：行
- column：列
- template：模板
- justify：调整
- content：内容
- item：项目
- container：容器
- self：自己
- Fraction：片段
- Area：地区、区域
grid布局系统术语
Grid container：网格容器
Grid item：网格项目
Grid Line：网格线
行轴
列轴
第一组网格容器
display:grid
定义：设置网格容器
第二组显式网格
grid-template-rows
定义：设置显式网格行（行数和行高）
示例
.container{
grid-template-rows: 100px 100px;/*两行，行高100px*/
}
grid-template-columns
定义：设置显式网格列（列数和列宽）
示例
.container{
grid-template-columns: 100px 100px 100px; /*三列，列宽100px*/
/*grid-template-columns: repeat(3,1fr);*/ /*三列，等宽*/
}
grid-template(简写属性)
定义：简写方式；设置显式网格（网格列、网格行、网格区域）
示例
.container{
grid-template: 100px 100px / 100px 100px 100px;
/*两行，行高100px*/ /*两列，列宽100px*/
}
grid-template-areas
定义：设置显式网格区域
示例：
.container{
grid-template-areas: "header header header",
"main main main",
"footer footer footer";
}
第三组隐式网格
grid-auto-rows
定义：设置隐式网格的行高(只有一个值)
示例：
.container{
grid-auto-rows: auto;
}
grid-auto-columns
定义：设置隐式网格的列宽(基本用不上)
示例：
.container{
grid-auto-columns: 200px;
}
第四组对齐方式
justify-content
定义：设置网格沿行轴的对齐方式
属性值
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 水平居中对齐 |
| space-between | 项目在行与行之间留有间隔。 |
| space-around | 项目在行之前、行之间和行之后留有空间。 |
示例
.container{
justify-content: end; /*位于行轴的结尾*/
}
justify-items
定义：设置网格单元沿行轴的对齐方式
语法
justify-items: start | end | center | stretch;
示例
.container{
justify-items: center;/*位于行轴线的中心位置*/
}
justify-self
定义：覆盖justify-items的值
示例
.box{
justify-self: start;
}
align-content
定义：设置网格沿列轴的对齐方式
属性值
| 值 | 描述 |
|---|---|
| stretch | 默认值。行拉伸以占据剩余空间。 |
| center | 垂直居中对齐 |
| flex-start | 位于容器开头 |
| flex-end | 位于容器结尾 |
| space-between | 行均匀分布在弹性容器中。 |
| space-around | 行均匀分布在弹性容器中，两端各占一半。 |
示例
.container{
align-content: end;/*位于列轴结尾*/
}
align-items
定义：设置网格单元沿列轴的对齐方式
语法:
align-items: stretch|center|flex-start|flex-end|baseline
示例：
.container{
align-items: center;/*位于列轴中间*/
}
align-self
定义：覆盖align-items的值
示例：
.box{
align-self: end;
}
第五组网格间距
column-gap
定义：设置列间距
示例：
.container{
column-gap:10px /*每列的间距为10px*/
}
row-gap
定义：设置行间距
示例
.container{
row-gap:10px /*每行的间距为10px*/
}
gap（简写属性）
定义：网格间距
示例：
.container{
gap:10px /*元素与元素的间距为10px*/
}
第六组跨列跨行
grid-column-start
定义：设置跨列起始线
示例
.box{
grid-column-start:1
}
grid-column-end
定义： 设置跨列结束线
示例
.box{
grid-column-end: 3;
}
grid-column(简写属性)
定义：跨列简写属性
示例
.box{
grid-column: 1 / 3;
}
grid-row-start
定义：跨行起始线
示例：
.box{
grid-row-start:1
}
grid-row-end
定义：跨行结束线
示例：
.box{
grid-row-end: 3;
}
grid-row(简写属性)
定义：跨行简写属性
示例：
.box{
grid-row:1 / 3
}
grid-area(简写属性)
定义：定义网格区域 是grid-column和grid-row的简写属性
示例
.box{
grid-area:header;
}
