基本概念
1.容器—有容器属性(container)
2.项目—有项目属性(items)
Grid布局（网格布局）
顾名思义将区域划分为一个一个的格子来布局，功能强大,但兼容性不如flex布局。
使用步骤：
display：grid或display:inline-grid使元素生成一个块级的Grid容器- 使用
grid-template-相关属性将容器划分为网络（定义行和列） - 设置每一个子项占哪些行
步骤2 划分网格的线即为网格线。Grid会自动创建编号的网格线来定位每一个元素，m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序，从右到左，从下到上，则是按照 -1，-2，-3…顺序进行编号排序
一、容器属性
1. grid-template-*
grid-template-columns 每一列的列宽
grid-template-rows 每一行的行高
grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px
1.1 使用repeat()函数，简化重复的值
repeat接受多个参数，第一个参数是重复的次数，后面的参数是所要重复的值。
grid-template-rows: repeat(4, 25%);
grid-template-columns: repeat(2, 100px 20px);/*该代码定义了4列，第一列和第四列的宽度为100px，第二列和第五列为20px，*/
1.2 auto-fill表示自动填充
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 40px);
/*上面代码表示每列宽度40px，自动填充，直到容器放不下。*/
}
1.3 fr 单位
fr表示比例关系
.container {
display: grid;
grid-template-columns: 1fr 1fr;
//表示两个相同宽度的列
}
1.4 minmax()
minmax()表示长度范围，两个参数分别是最小值和最大值
grid-template-columns: 1fr minmax(150px，1fr);
/*表示第二列列宽不小于150px，不大于1fr*/
1.5 auto关键字
auto关键字表示由浏览器自己决定长度。
grid-template-columns: 100px auto 100px;
1.6 网格线的名称
grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字
grid-template-columns: [a] 100px [b] 100px [c] 100px [d];
}
网格布局允许同一根线有多个名字
2. row-gap,column-gap，gap
| 属性 | 描述 |
|---|---|
| row-gap | 用于设置行间距 |
| column-gap | 用于设置列间距 |
| gap | 是column-gap和row-gap的合并简写形式 |
如果gap省略了第二个值，浏览器认为第二个值等于第一个值。
3. grid-template-areas定义区域
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
//9个单元格，命名为a-i的九个区域
多个单元格合并成一个区域
grid-template-areas: 'a a a'
'b b b'
如果某些区域不需要利用，则使用"点"（.）表示。
grid-template-areas: 'a . c'
'd . f'
'g . i';
/*中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域*/
- 区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为-start，终止网格线自动命名为-end。
4. grid-auto-flow
| 属性 | 描述 |
|---|---|
| row | 先行后列 |
| column | 先列后行 |
| row dense | 先行后列 换行时留下的空间可以由下面的元素填补上去 |
| column dense | 先列后行 换行时留下的空间可以由下面的元素填补上去 |
5. *-items
justify-items属性设置单元格内容的水平位置（左中右）align-items属性设置单元格内容的垂直位置（上中下）place-items属性是align-items属性和justify-items属性的合并简写形式，如果省略第二个值，则浏览器认为与第一个值相等。。
| 属性 | 描述 |
|---|---|
| start | 对齐单元格的起始边缘 |
| end | 对齐单元格的结束边缘 |
| center | 单元格内部居中 |
| stretch | 拉伸，占满单元格的整个宽度（默认值） |
6. *-content
justify-content属性是整个内容区域在容器里面的水平位置（左中右）align-content属性是整个内容区域的垂直位置（上中下）place-content属性是align-content属性和justify-content属性的合并简写形式，如果省略第二个值，浏览器就会假定第二个值等于第一个值。
| 属性 | 描述 |
|---|---|
| start | 对齐单元格的起始边缘 |
| end | 对齐单元格的结束边缘 |
| center | 单元格内部居中 |
| stretch | 项目大小没有指定时，拉伸占据整个网格容器 |
| space-around | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍 |
| space-between | 项目与项目的间隔相等，项目与容器边框之间没有间隔 |
| space-evenly | 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔 |
7. grid-auto-*
grid-auto-columns属性和grid-auto-rows属性
一些项目的指定位置，在现有网格的外部。所以浏览器会自动生成多余的网格来放置项目
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。- 与
grid-template-columns和grid-template-rows的写法完全相同。 - 如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
8.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-startgrid-column-endgrid-row-startgrid-row-end
根据起、始网格线，来指定item的具体位置，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
grid-column-start:1;
grid-column-end:5;
grid-row-start:1;
grid-row-end:5;
grid-column(1,2简写形式)
grid-column: 1 / 5;
grid-row(3,4简写形式)
grid-row: 1 / 5;
grid-area
- 指定项目放在哪一个区域
grid-area: e;
- 简写形式
grid-area: 1 / 1 / 5 / 5;
/*grid-area: <row-start> / <column-start> / <row-end> / <column-end>;*/
justify-self：属性允许单个项目有与其他项目不一样的对齐方式（水平），用法与justify-self一样。默认继承父元素的justify-self属性，如果没有父元素，则等同于stretch。align-self：属性允许单个项目有与其他项目不一样的对齐方式（垂直），剩下同justify-self。place-self(8和9的简写形式)
place-self: center center;
/*place-self: <align-self> <justify-self>*/
如果省略第二个值，place-self属性会认为这两个值相等
