CSS 之 grid 网格布局

CSS 之 grid 网格布局
一、简介

display: grid;用于设置元素内部的布局类型为网格布局，其外显类型为块级元素。该类型的元素将内部分为行和列，划分成一个个单元格，并通过一系列相关属性控制单元格及其内容的布局和大小。

该属性值的主要应用场景为：多行多列元素排列布局。

采用grid布局的元素，被称为“容器”（container），其内部的直接子元素被称为“项目”（item）。

容器中水平X轴方向被称为“行”，垂直Y轴方向被称为“列”。行跟列所产生的交叉区域，就是“单元格”。

划分网格的线，称为“网格线”，又根据行和列，被划分为“水平网格线”和“垂直网格线”。通常情况下，n行元素就会有n+1根水平网格线，m列元素就会有m+1根垂直网格线。

当父元素设置为grid布局时，其内部子元素的float、display: inline-block、vertical-align等属性都将失效。

浏览器兼容性：

注意：该博客下的所有案例都以下面的dom结构为基础：
```
<style>
.d2 {
  margin: 20px;
}
.d2>div {
  background: pink;
  text-align: center;
}
.d2>div:nth-child(2n){
background: yellow;
}
style>

<div class="d2">
  <div class="d2-1">1div>
  <div class="d2-2">2div>
  <div class="d2-3">3div>
  <div class="d2-4">4div>
  <div class="d2-5">5div>
  <div class="d2-6">6div>
  <div class="d2-7">7div>
  <div class="d2-8">8div>
  <div class="d2-9">9div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
```
二、容器属性

1、属性列举

设置display: grid;的元素，即为容器元素，那么定义在容器上的相关属性，就被称为容器属性。容器上共有17条，包含以下：
- grid-template-columns：定义每一列的列宽。
- grid-template-rows：定义每一行的行高。
- column-gap：定义列与列之间的列间距，原属性名为：grid-column-gap。
- row-gap：定义行与行之间的行间距，原属性名为：grid-row-gap。
- gap：定义列间距和行间距，是column-gap与row-gap的简写形式，原属性名为：grid-gap。
- grid-template-areas：定义网格区域名称。
- grid-auto-flow：定义单元格排列顺序。
- justify-items：定义单元格中内容的水平位置（左中右）。
- align-items：定义单元格中内容的垂直位置（上中下）。
- place-items：定义单元格中内容的水平位置和垂直位置，是justify-items和align-items的简写形式。
- justify-content：定义容器中整体内容的水平位置（左中右）。
- align-content：定义容器中整体内容的垂直位置（上中下）。
- place-content：定义容器中整体内容的水平位置和垂直位置，是justify-content和align-content的简写形式。
- grid-auto-columns：定义容器中多余网格的列宽。
- grid-auto-rows：定义容器中多余网格的行高。
- 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 这六个属性的简写形式。
2、grid-template-columns

① 定义列宽的各种方式

该属性用来定义网格布局中每一列的列宽，属性值可以是px、百分比、repeat()、auto-fill、auto-fit、fr、minmax()、auto等等。

px 单位就是定义一个固定的列宽：
```
.d2 {
  display: grid;
  /* 设置三列列宽 宽度都为100px */
  grid-template-columns: 100px 100px 100px;
}
1
2
3
4
5
```
页面效果：

百分比 单位定义的列宽，取决于容器的宽度，百分比的基数就是容器设置的宽度：
```
.d2 {
  display: grid;
  /* 设置三列列宽 分别占父元素的20% 50% 30% */
  grid-template-columns: 20% 50% 30%;
  width: 300px;
}
1
2
3
4
5
6
```
页面效果：

repeat(n,m) 方法用来简化重复的值，接收两个参数，第一个参数n，表示重复的次数，第二个参数值表示要重复的，而且可以与其他类型的属性值共同使用。还可以重复渲染一组数据，实际渲染的列数=重复的数据数量*重复的次数。
```
.d2 {
  display: grid;
  /* 第一个值 设置前两列的列宽 repeat()重复两次50px 第三个值 设置第三列宽200px */
  grid-template-columns: repeat(2, 50px) 200px;
  /* 将一组值 重复两次 相当于设置了四个值 该属性值等价于50px 100px 50px 100px */
  grid-template-columns: repeat(2, 50px 100px);
}
1
2
3
4
5
6
7
```
页面效果：

auto-fill 是一个关键字，通常与repeat(n,m) 方法结合使用，将其设置为参数n，表示在确定好列宽m和容器宽度的基础上，尽可能的在一行上填充更多的列。如果还剩余不足一列宽度的空间，则会将剩余空间空着占位。
```
.d2 {
  display: grid;
  /* 表示以列宽60px 尽可能的在容器宽度300px中塞下更多的列 */
  grid-template-columns: repeat(auto-fill, 60px);
  width: 300px;
}
1
2
3
4
5
6
```
页面效果：

fr 是一个关键字单位，是fraction（片段）的缩写，实际意义表示比例关系，如果设置的grid-template-columns中只包含fr，且容器设置了固定宽度，则1fr的实际宽度为容器的宽度/fr的总和，然后再根据每个数据的值，得到对应列的列宽，例如设置容器宽度300px，设置列宽分别为：1fr 2fr 3fr，则1fr=300/(1+2+3)=50px，计算出对应的列宽为： 50px 100px 150px。
```
.d2 {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr; /* 实际列宽 50px 100px 150px */
  width: 300px;
}
1
2
3
4
5
```
页面效果：

如果设置的grid-template-columns中只包含fr，且容器没有设置宽度，则1fr的实际宽度取决于所有列的项目宽度/对应的fr中的最大值，例如：设置列宽分别为：1fr 2fr 3fr，列中对应的项目的宽度分别为：40px 100px 120px，根据对比40/1=40、100/2=50、120/3=40，得出50最大，因此1fr=50px，实际列宽将以这个单位为准。
```
.d2 {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr; /* 实际列宽 50px 100px 150px */
}
.d2-1 {
  width: 40px;
}
.d2-2 {
  width: 100px;
}
.d2-3 {
  width: 120px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
```
页面效果：

如果设置的grid-template-columns中同时包含fr和其他绝对长度单位，如果容器设置了固定宽度，则1fr的实际宽度为(容器的宽度-绝对单位列宽和)/fr的总和，例如：设置容器宽度300px，设置列宽分别为：150px 2fr 3fr，则1fr=(300-150)/(2+3)=30px，计算出对应的列宽为： 150px 60px 90px；如果容器没有设置固定宽度，则1fr的实际宽度取决于所有以fr为单位的列的项目宽度/对应的fr中的最大值。
```
.d2 {
  display: grid;
  grid-template-columns: 150px 2fr 3fr;/* 实际列宽 150px 60px 90px */
  width: 300px;
}
1
2
3
4
5
```
minmax(min,max) 是一个方法，用来指定一个范围，表示列宽的范围，其接受两个参数，分别为最小值和最大值。如果容器设置了宽度，且去掉设置的固定列宽后，剩余的宽度正好位于minmax()区间内，则取剩余空间值；如果剩余的宽度大于区间，则取区间最大值；如果剩余的宽度小于区间，则取区间最小值；如果容器未设置宽度，则取区间最大值。
```
.d2 {
  display: grid;
  /* 去掉固定列宽 剩余宽度300-150-50=100 位于区间内 取剩余宽度 此时实际列宽为： 150px 50px 100px*/
  grid-template-columns: 150px 50px minmax(80px, 120px); 
  width: 300px;
}
.d3 {
  display: grid;
  /* 去掉固定列宽 剩余宽度300-150-50=100 小于区间 取最小值 此时实际列宽为： 150px 50px 110px*/
  grid-template-columns: 150px 50px minmax(110px, 120px); 
  width: 300px;
}
.d4 {
  display: grid;
  /* 去掉固定列宽 剩余宽度300-150-50=100 大于区间 取最大值 此时实际列宽为： 150px 50px 80px*/
  grid-template-columns: 150px 50px minmax(70px, 80px); 
  width: 300px;
}
.d5 {
  display: grid;
  /* 无固定宽度 则取最大值 此时实际列宽为： 150px 50px 120px*/
  grid-template-columns: 150px 50px minmax(80px, 120px); 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
```
页面效果（剩余宽度位于区间内）：

auto 是一个关键字，表示自适应宽度，如果容器设置了宽度，设置列宽为auto，则表示将容器的宽度去掉其他类型的宽度之后，剩余的宽度均分给设置了auto的列；如果容器没有设置宽度，设置列宽为auto，则表示列宽取当前列中宽度最大的项目的宽度为列宽。
```
.d2 {
  display: grid;
  /* 300-150-100=50 此时 auto 的实际列宽为50px */
  grid-template-columns: 150px auto 100px; 
  width: 300px;
}
.d3 {
  display: grid;
  /* 300/3=100 此时 auto 的实际列宽为100px */
  grid-template-columns: auto auto auto; 
  width: 300px;
}
.d4 {
  display: grid;
  /* 此时 auto 的实际列宽取决于这一列项目中的最大宽度 */
  grid-template-columns: 150px auto 50px; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
页面效果（150px auto 100px）：

② 当实际列数少于定义的列数时

该属性除了定义了列宽之外，属性值的数量还决定了列的数量，定义几个属性值，就会创建几列。即使实际列数小于定义的列数，但是缺失的列依旧会占据对应的空间，撑起容器的宽度。

如果容器已经设置了宽度，则宽度不会受列数影响，就算有项目超出容器空间之外，超出的部分也不会影响其他元素的整体布局，不占用普通文档流位置。
```
.d2 {
  display: grid;
  /* 设置三列列宽 宽度都为100px */
  grid-template-columns: 100px 100px 100px;
}
1
2
3
4
5
```
页面效果（实际只有2个项目）：

③ 定义垂直网格线的名称

该属性在定义列宽的同时，还可以使用[]定义垂直网格线的名称，在后续对单元格进行定位时，需要使用该名称。定义三列，则会产生四条垂直网格线。定义语法为：
```
.d2 {
  display: grid;
  /* 设置三列列宽 宽度都为100px 四条垂直网格线的名称为 a1 a2 a3 a4 */
  grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
}
1
2
3
4
5
```
网格布局允许同一根线有多个名字，只需在[]中定义多个值即可，例如：[a1 a2]。

3、grid-template-rows

① 定义行高的各种方式

该属性用来定义网格布局中每一行的行高，属性值可以是px、百分比、repeat()、auto-fill、fr、minmax()、auto等等。
```
.d2 {
  display: grid;
  /* 设置三列列宽 宽度都为100px */
  grid-template-columns: 100px 100px 100px;
  /* 设置三行行高 高度都为100px */
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5
6
7
```
页面效果：

定义行高的方式整体与上面定义列宽的各种方式相同，此处只针对一些不同点讲述，其余就不进行太多赘述了。

auto-fill 关键字，在设置行高时，与设置列宽有所不同，将其设置为repeat(n,m) 的参数n，表示在确定好行高m和容器高度的基础上，尽可能的在一列上设置更多行的行高为m。如果容器的高度大于等于行数×行高，则所有行都能正常设置行高。如果容器的高度小于行数×行高，则先会从上到下的顺序依次设置行高为m，直到剩余空间小于m，然后剩余的行，均分剩余的空间，行高也就不再是m。
```
.d2 {
  display: grid;
  /* 设置三列列宽 宽度都为100px */
  grid-template-columns: 100px 100px 100px;
  /* 设置行高 200px 此时9个项目 共三行 实际行高为 200px 50px 50px */
  grid-template-rows: repeat(auto-fill, 200px);
  /* 容器宽度为300px */
  height: 300px;
}
1
2
3
4
5
6
7
8
9
```
页面效果：

如果不设置某行的行高，且未设置容器高度，则该行将以当前行中所有项目的最大高度为行高；如果不设置某行的行高，但设置了容器高度，且已经设置的行高不超过容器高度，则所有未设置行高的行，均分容器剩余高度；如果不设置某行的行高，但设置了容器高度，且已经设置的行高超过了容器高度，则未设置行高的行，将以当前行中所有项目的最大高度为行高。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  /* 有9个项目 应该是三行 但只定义了两行的行高 且超出了容器的高度 因此第三行将会以本行项目的最大高度为行高 */
  grid-template-rows: 200px 120px;
  /* 设置容器的高度 */
  height: 300px;
}
.d2-7 {
  /* 设置第三行项目中的最大高度 */
  height: 50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
```
页面效果：

② 当实际行数不等于定义的行数时

该属性除了定义了行高之外，属性值的数量还决定了行的数量，如果容器没有设置高度，即使实际行数小于定义的行数，但是缺失的行依旧会占据对应的空间，撑起容器的高度。如果实际的行数大于定义的行数，则多出来的行将会以本行中项目的最大高度为行高，撑起容器的高度。

如果容器已经设置了高度，则高度不会受行数影响，就算有项目超出容器空间之外，超出的部分也不会影响其他元素的整体布局，不占用普通文档流位置。
```
.d2 {
  display: grid;
  /* 设置三列列宽 宽度都为100px */
  grid-template-columns: 100px 100px 100px;
  /* 设置三行行高 高度都为100px */
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5
6
7
```
页面效果（实际只有2个项目）：

③ 定义水平网格线的名称

该属性在定义列宽的同时，还可以使用[]定义水平网格线的名称，在后续对单元格进行定位时，需要使用该名称。定义三行，则会产生四条水平网格线。定义语法为：
```
.d2 {
  display: grid;
  /* 设置三行行高 高度都为100px 四条水平网格线的名称为 b1 b2 b3 b4 */
  grid-template-rows: [b1] 100px [b2] 100px [b3] 100px [b4];
}
1
2
3
4
5
```
网格布局允许同一根线有多个名字，只需在[]中定义多个值即可，比如[b1 b2]。

4、column-gap（原grid-column-gap属性）

该属性用来定义网格布局中列与列的之间的间隔，也就是列间距。列间距的只存在于列与列之间，也就是说如果有三列项目，则存在两个列间距。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置列间距为20px */
  column-gap: 20px;
}
1
2
3
4
5
6
7
```
页面效果：

5、row-gap（原grid-row-gap属性）

该属性用来定义网格布局中行与行的之间的间隔，也就是行间距。行间距的只存在于行与行之间，也就是说如果有三行项目，则存在两个行间距。如果容器没有设置高度，则容器高度等于所有行高的和加上所有行间距的和。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置列间距为20px */
  column-gap: 20px;
  /* 设置行间距为20px */
  row-gap: 20px;
}
1
2
3
4
5
6
7
8
9
```
页面效果：

6、gap

gap属性是column-gap和row-gap的合并简写形式，属性值有两个，第一个值表示行间距row-gap的值，第二个值表示列间距column-gap的值。

如果行间距和列间距的值相同，则可以省略第二个值，只写一个值，浏览器会默认第二个值等于第一个值。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置行间距和列间距为20px */
  gap: 20px;
}
1
2
3
4
5
6
7
```
页面效果：

7、grid-template-areas

该属性用于在网格布局中指定“区域”，一个区域可以由一个或多个单元格组成，定义的区域用于项目属性grid-area，指定项目位置。该属性值的以单元格的排列形式为基础，每行对应一个'x x x'字符串，字符串中的每个小字符串对应一个单元格，也对应着生成的区域名。
```
/* 容器有9个项目 三行三列 因此有三个字符串 每个字符串中有三个区域名 生成三个区域 */
grid-template-areas: 'a1 a2 a3' 'b1 b2 b3' 'c1 c2 c3';
1
2
```
如果想要定义多个单元格为一个区域，则只需要将想要合并的单元格对应的区域名设置相同即可，但前提是：想要合并的单元格之间需要相互接触连接。
```
/* 容器有9个项目 三行三列 因此有三个字符串 区域名如果相同则会合并成一个区域  */
/* 此时是声明了三个区域 */
grid-template-areas: 'a a a' 'b b b' 'c c c';
1
2
3
```
如果某个单元格不需要被划分到任何区域，则只需要在该单元格对应的位置使用.来作为区域名即可。
```
grid-template-areas: 'a a .' 'b b .' '. c c';
1
```
还有要注意的一点是：区域的命名会影响到网格线的命名，每个区域的起始网格线（垂直、水平）会自动命名为区域名-start，终止网格线（垂直、水平）自动命名为区域名-end。例如：区域名为header，则起始的水平网格线和垂直网格线叫做header-start，终止的水平网格线和垂直网格线叫做header-end。

8、gride-auto-flow

该属性用于这是网格布局的项目排列顺序，默认值为row，即排列顺序为按行排列，就是从左到右先排满第一行，然后再从左到右开始排第二行，依次排列。该属性值有：
- column：即排列顺序为按列排列，就是从上到下先排满第一列，然后再从上到下开始排第二列，依次排列。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  grid-auto-flow: column;
}
1
2
3
4
5
6
```
页面效果：
- row dense：用于设置在部分项目指定位置后，剩余项目的的排列顺序为按行排列，即在排除掉指定项目位置的空间后，剩余项目依次从左到右按行排列。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  grid-auto-flow: row dense;
}
.d2-1 {
  /* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽  */
  grid-column-start: 1;
  grid-column-end: 3;
}
.d2-2 {
  /* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽  */
  /* 因为两个项目的对应的垂直网格线相同 所以将会按照元素顺序上下排列 */
  grid-column-start: 1;
  grid-column-end: 3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
页面效果：

此时因为项目1和项目2，占据了两列空间，因此，会有两个项目超出三行，排列在第四行，该行的行高取决于当前行项目中的最大高度。
- column dense：用于设置在部分项目指定位置后，剩余项目的的排列顺序为按列排列，即在排除掉指定项目位置的空间后，剩余项目依次从上到下按列排列。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  grid-auto-flow: column dense;
}
.d2-1 {
  /* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽  */
  grid-column-start: 1;
  grid-column-end: 3;
}
.d2-2 {
  /* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽  */
  /* 因为两个项目的对应的垂直网格线相同 所以将会按照元素顺序上下排列 */
  grid-column-start: 1;
  grid-column-end: 3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
页面效果：

此时因为，项目1和项目2占据了两列空间，所有会有两个项目超出三列，出现在第四列，该列的列宽取决于容器的剩余宽度。

9、justify-items

该属性用于设置网格布局中，当单元格内容宽度小于单元格的宽度时，内容的水平对齐位置（左中右）。该属性值有：。
- stretch(默认值)：将内容进行拉伸，使其占满单元格的整个宽度。
- start：内容宽度不变，左侧边框对齐单元格的左侧边缘。
- end：内容宽度不变，右侧边框对齐单元格的右侧边缘。
- center：内容宽度不变，使其在单元格内水平居中。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置内容水平居中 */
  justify-items: center;
}
.d2>div {
  width: 60px;
}
1
2
3
4
5
6
7
8
9
10
```
页面效果：

10、align-items

该属性用于设置网格布局中，当单元格内容高度小于单元格的高度时，内容的垂直对齐位置（上中下）。该属性值有：
- stretch(默认值)：将内容高度进行拉伸，使其占满单元格的整个高度。
- start：内容高度不变，上侧边框对齐单元格的上侧边缘。
- end：内容高度不变，下侧边框对齐单元格的下侧边缘。
- center：内容高度不变，使其在单元格内垂直居中。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置内容水平居中 */
  justify-items: center;
  /* 设置内容垂直居中 */
  align-items: center;
}
.d2>div {
  width: 60px;
  height: 60px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
```
页面效果：

11、place-items

该属性是align-items属性和justify-items属性的简写，第一个值表示单元格内容的垂直对齐位置，第二个值表示单元格内容的水平对齐位置。

如果两个值相同，则可以省略第二个值，只写一个值，浏览器会默认第二个值等于第一个值。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 设置内容垂直、水平居中 */
  place-items: center;
}
.d2>div {
  width: 60px;
  height: 60px;
}
1
2
3
4
5
6
7
8
9
10
11
```
页面效果：

同上图一致。

12、justify-content

该属性用于设置网格布局中，当整个内容区域宽度小于容器的宽度时，内容区域在容器中的水平位置（左中右）。属性值有：
- start(默认值)：内容区域左边框对齐容器的左边缘。
- end：内容区域右边框对齐容器的右边缘。
- center：内容区域在容器中水平居中。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 设置内容区域在容器中水平居中 */
  justify-content: center;
}
1
2
3
4
5
6
7
```
页面效果：
- stretch：如果内容区域中存在没有设置宽度和列宽的的项目时，拉伸这些项目，使整个内容区域的宽度等于容器的宽度。
- space-around：使每个项目的两侧间隔均分容器水平方向剩余的空间，项目两侧的间隔相等，因此项目之间的间隔比项目与容器边缘的间隔大一倍。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 设置内容区域在容器中水平居中 */
  justify-content: space-around;
}
1
2
3
4
5
6
7
```
页面效果：
- space-between：仅项目与项目之间的间隔均分容器水平方向的剩余空间，但最左和最右的项目与容器边缘之间没有间隔。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 设置内容区域在容器中水平居中 */
  justify-content: space-around;
}
1
2
3
4
5
6
7
```
页面效果：
- space-evenly：项目与项目之间，以及项目与容器边缘之间的间隔均分容器水平方向的剩余空间。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 设置内容区域在容器中水平居中 */
  justify-content: space-evenly;
}
1
2
3
4
5
6
7
```
页面效果：

13、align-content

该属性用于设置网格布局中，当整个内容区域高度小于容器的高度时，内容区域在容器中的垂直位置（上中下）。属性值有：
- start(默认值)：内容区域上边框对齐容器的上边缘。
- end：内容区域下边框对齐容器的下边缘。
- center：内容区域在容器中垂直居中。
- stretch：如果内容区域中存在没有设置高度和行高的的项目时，拉伸这些项目，使那整个内容区域的高度等于容器的高度。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  /* 第三行不设置行高 和 项目高度 */
  grid-template-rows: 100px 100px;
  /* 设置内容区域中未设置高度和行高的项目在容器中垂直拉伸 充满容器 */
  align-content: stretch;
  height: 500px;
}
1
2
3
4
5
6
7
8
9
```
页面效果：
- space-around：使每个项目的两侧间隔均分容器垂直方向剩余的空间，项目两侧的间隔相等，因此项目之间的间隔比项目与容器边缘的间隔大一倍。
- space-between：仅项目与项目之间的间隔均分容器垂直方向的剩余空间，但最左和最右的项目与容器边缘之间没有间隔。
- space-evenly：项目与项目之间，以及项目与容器边缘之间的间隔均分容器垂直方向的剩余空间。
14、place-content

该属性是align-content属性和justify-content属性的简写，第一个值表内容区域的垂直对齐位置，第二个值表示内容区域的水平对齐位置。

如果两个值相同，则可以省略第二个值，只写一个值，浏览器会默认第二个值等于第一个值。
```
.item {
  place-content: center;
}
/* 等同于 */
.item {
  place-content: center center;
}
/* 等同于 */
.item {
  align-content: center;
  justify-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
```
15、grid-auto-columns

该属性用来设置因为项目多余或因为部分项目定位而导致浏览器自动创建的单元格的列宽是多少，用法与grid-template-columns相同。如果不指定该属性，则浏览器会根据项目的宽度，决定当前列的列宽。
```
.d2 {
  display: grid;
  /* 容器只定义三列 */
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 设置多出来的列 列宽为50px */
  grid-auto-columns: 50px
}
.d2-9 {
  /* 定义第九个项目 在第四行第四列 */
  grid-column-start: 4;
  grid-row-start: 4
}
1
2
3
4
5
6
7
8
9
10
11
12
13
```
页面效果：

16、grid-auto-rows

该属性用来设置因为项目多出或部分项目定位而导致浏览器自动创建的单元格的行高是多少，用法与grid-template-rows相同。如果不指定该属性，则浏览器会根据项目的高度，决定当前行的行高。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  /* 容器只定义两行 但是9个项目会排成三行 */
  grid-template-rows: 100px 100px;
  /* 设置多出来的行 行高为50px */
  grid-auto-rows: 50px
}
1
2
3
4
5
6
7
8
```
页面效果：

17、grid-template

该属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的简写形式。

从代码易读性考虑，不建议使用该属性，所以这里就不过多讲述了。如想了解请查看：grid-template。

18、grid

该属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的简写形式。

从代码易读性考虑，不建议使用该属性，所以这里就不过多讲述了。如想了解请查看：grid。

三、项目属性

1、属性列举

设置display: grid;的元素，即为容器元素，容器内部的直接子元素即为项目元素，定义在项目上的相关属性，就被称为项目属性。项目属性共有10条，包含以下：
- grid-column-start：定义项目左边框所对齐的垂直网格线。
- grid-column-end：定义项目右边框所对齐的垂直网格线。
- grid-column：同时定义项目左边框和右边框所对齐的网格线，是grid-column-start和grid-column-end的简写形式。
- grid-row-start：定义项目上边框所对齐的水平网格线。
- grid-row-end：定义项目下边框所对齐的水平网格线。
- grid-row：同时定义项目上边框和下边框所对齐的网格线，是grid-row-start和grid-row-end的简写形式。
- grid-area：定义项目位于哪个区域，区域由容器属性grid-template-areas定义。
- justify-self：定义项目在单元格区域内的水平位置（左中右），与justify-items用法一致，但效果仅限于当前项目。
- align-self：定义项目在单元格区域内的垂直位置（上中下），与align-items用法一致，但效果仅限于当前项目。
- place-self：同时定义项目在单元格区域内的水平和垂直位置，是align-self属性和justify-self属性的简写。
2、grid-column-start

3、grid-column-end

这两个属性用于指定项目在容器内的水平定位，类似于CSS的absolute定位，但不会脱离文档流，不过此处的定位是通过指定边框对应的网格线来进行定位。设置定位的项目，会出现在定位的位置，而其余普通项目，则会按照正常排序，进行排列。

该属性有多个类型的值：
- auto（默认值）：一个关键字，表示项目按照正常排序规则，自动排列，占据1个单元格。
- ：一个是数字，可以是正数和负数，设置为0则无效。正数表示项目位置从左侧第一条网格线进行计数，负数表示项目从显式定义的最后一条网格线，再往右进行扩展。正常一个项目对应一个单元格，但是通过定位可以设置项目跨多个单元格，使其占据多个单元格。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
.d2-2 {
  /* 指定左边框对应位置是第2条垂直网格线 */
  grid-column-start: 2;
  /* 指定右边框对应位置是第4条垂直网格线 */
  grid-column-end: 4;
}
1
2
3
4
5
6
7
8
9
10
11
```
页面效果：
- ：一个名称，表示某个网格线名称，像是通过grid-template-areas属性产生的网格线名称，或者在定义行高和列宽时定义的网格线名称。如果存在对应的网格线，则进行对齐；如果不存在对应的网格线，则会以第n+1条网格线作为起始网格线，n为项目显式定义的网格线。
- ：一个名称加一个数字，表示仅计算具有该名称的网格线，然后计数第几条网格线进行定位。
- span ：一个关键字加一个数字，sapn关键字表示跨越，后面的数字表示跨域多少个单元格，跨越的起始位置为默认位置。如果省略则默认为1，不可设置负数和0.
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
.d2-2 {
  /* 指定左边框对应位置是初始位置向右两个单元格 */
  grid-column-start: span 2;
  /* 指定右边框对应位置是初始位置向右两个单元格 */
  grid-column-end: span 2;
}
1
2
3
4
5
6
7
8
9
10
11
```
页面效果：

4、grid-row-start

5、grid-row-end

这两个属性用于指定项目在容器内的垂直定位，类似于CSS的absolute定位，但不会脱离文档流，不过此处的定位是通过指定边框对应的网格线来进行定位。设置定位的项目，会出现在定位的位置，而其余普通项目，则会按照正常排序，进行排列。

该属性的属性值与grid-column-start、grid-column-end相同，有：
- auto（默认值）
- span
各个属性值的效果也相同，只不过一个是定位左右边框位置，一个是定位上下边框的位置，在此就不重复讲述了。

**注意：**如果在容器中有多个项目使用属性进行定位，导致项目之间发生重叠，此时需要z-index属性指定项目的层级顺序，值越大，层级越高。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
.d2-2 {
  /* 项目的左边框从第二条垂直网格线开始 右边框到第四条垂直网格线结束 */
  grid-column-start: 2;
  grid-column-end: 4;
  /* 项目的上边框从第一条水平网格线开始 下边框到第三条水平网格线结束 */
  grid-row-start: 1;
  grid-row-end: 3;
  /* 指定z-index */
  z-index: 1;
}
.d2-3 {
  /* 项目的左边框从第三条垂直网格线开始 右边框到第四条垂直网格线结束 */
  grid-column-start: 3;
  grid-column-end: 4;
  /* 项目的上边框从第一条水平网格线开始 下边框到第二条水平网格线结束 */
  grid-row-start: 1;
  grid-row-end: 2;
  /* 指定z-index */
  z-index: 2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
```
页面效果：

6、grid-column

7、grid-row

这两条属性分别是grid-column-start和grid-column-end、grid-row-start和grid-row-end的简写形式。可以同时定义起始网格线和终止网格线，语法格式如下：
```
grid-column:  / ;
grid-row:  / ;
1
2
```
属性值的类型与grid-*-start等相同，可以是span、数字等等，例如：
```
.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11
```
属性的第二个值可以省略，默认第二个值是第一个值+1，即项目只跨越一个单元格。
```
.item {
  grid-column: 2;
  grid-row: 2;
}
1
2
3
4
```
8、grid-area

该属性用于指定项目定位在某个区域内，区域由容器属性grid-template-areas定义，属性值为区域名。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 容器有9个项目 三行三列 因此有三个字符串 每个字符串中有三个区域名 每行生成三个区域 */
  grid-template-areas: 'a1 a2 a3' 'b1 b2 b3' 'c1 c2 c3';
}
.d2-2 {
  /* 指定项目在区域 a3 中 */
  grid-area: a3;
}
1
2
3
4
5
6
7
8
9
10
11
```
页面效果：

除了指定项目的定位区域外，该属性还可以作为grid-row-start、grid-column-start、grid-row-end、grid-column-end四条属性的简写，语法如下：
```
grid-area:  /  /  / ;
1
```
9、justify-self

该属性用于上设置当前项目在单元格中的水平位置（左中右），跟justify-items属性的用法一致，但只作用于当前项目。属性值有：
- stretch(默认值)：将内容进行拉伸，使其占满单元格的整个宽度。
- start：内容宽度不变，左侧边框对齐单元格的左侧边缘。
- end：内容宽度不变，右侧边框对齐单元格的右侧边缘。
- center：内容宽度不变，使其在单元格内水平居中。
10、align-self

该属性用于上设置当前项目在单元格中的垂直位置（上中下），跟align-items属性的用法一致，但只作用于当前项目。
- stretch(默认值)：将内容进行拉伸，使其占满单元格的整个高度。
- start：内容高度不变，上侧边框对齐单元格的上侧边缘。
- end：内容高度不变，下侧边框对齐单元格的下侧边缘。
- center：内容高度不变，使其在单元格内垂直居中。
```
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
}
.d2>div {
  width: 60px;
  height: 60px;
}
.d2-2 {
  /* 水平居中 */
  justify-self: center;
  /* 垂直居中 */
  align-self: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
页面效果：

11、place-self

该属性是align-self属性和justify-self属性的简写形式，语法格式如下：
```
place-self:  ;
1
```
如果两个属性值相等，则可以省略第二个值，浏览器默认等于第一个值。
```
.item {
  place-self: center;
}
/* 等同于 */
.item {
  place-self: center center;
}
/* 等同于 */
.item {
  justify-self：center;
  align-self：center;
}
1
2
3
4
5
6
7
8
9
10
11
12
```
四、参考资料

阮一峰的CSS Grid教程

MDN Grid文档
相关阅读:
【每日一题】打卡 31
JavaWeb学习-监听器
 Unity的IPostprocessBuild：深入解析与实用案例
 Python——Python基础编程题目
 QT学习之创建项目
 kubernetes-如何解决环境变量中敏感信息带来的安全隐患
 【数据结构】堆及堆排序详解
 一篇文章入门 Redis（万字长文干货）
新版本idea中使用springboot 国际化 Resource Bundle不显示
 mysql 计算两个坐标距离
原文地址：https://blog.csdn.net/weixin_45092437/article/details/132910278

一、简介

浏览器兼容性：

注意：该博客下的所有案例都以下面的dom结构为基础：

二、容器属性

1、属性列举

2、grid-template-columns

① 定义列宽的各种方式

页面效果：

页面效果：

页面效果：

页面效果：

页面效果：

页面效果：

页面效果（剩余宽度位于区间内）：

页面效果（150px auto 100px）：

② 当实际列数少于定义的列数时

页面效果（实际只有2个项目）：

③ 定义垂直网格线的名称

3、grid-template-rows

① 定义行高的各种方式

页面效果：

页面效果：

页面效果：

② 当实际行数不等于定义的行数时

页面效果（实际只有2个项目）：

③ 定义水平网格线的名称

4、column-gap（原grid-column-gap属性）

页面效果：

5、row-gap（原grid-row-gap属性）

页面效果：

6、gap

页面效果：

7、grid-template-areas

8、gride-auto-flow

页面效果：

页面效果：

页面效果：

9、justify-items

页面效果：

10、align-items

页面效果：

11、place-items

页面效果：

12、justify-content

页面效果：

页面效果：

页面效果：

页面效果：

13、align-content

页面效果：

14、place-content

15、grid-auto-columns

页面效果：

16、grid-auto-rows

页面效果：

17、grid-template

18、grid

三、项目属性

1、属性列举

2、grid-column-start

3、grid-column-end

页面效果：

页面效果：

4、grid-row-start

5、grid-row-end

页面效果：

6、grid-column

7、grid-row

8、grid-area

页面效果：

9、justify-self

10、align-self

页面效果：

11、place-self

四、参考资料