《十二》CSS3 Grid 网格布局

网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

Flex 布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。适用于一个方向上的布局。
Grid布 局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。适用于有行有列的布局。
Grid 布局远比 Flex 布局强大。

基本概念：

容器和项目：

采用 Grid 网格布局的元素，称为容器（container）。

容器的所有直接子元素自动成为容器成员，称为项目（item）。

项目只能是容器的直接子元素，不包含孙子元素。
Grid 布局只对项目生效。

行、列和单元格：

容器里面的水平区域称为行（row），垂直区域称为列（column）。

行和列的交叉区域，称为单元格（cell）。正常情况下，n 行和 m 列会产生 n x m 个单元格（比如：3 行 3 列会产生 9 个单元格）。

网格线：

划分网格的线，称为网格线（grid line）。

水平网格线划分出行，垂直网格线划分出列。正常情况下，n 行有 n + 1 根水平网格线，m 列有 m + 1 根垂直网格线（比如：3 行就有 4 根水平网格线）。

其他：

行与行之间的间距，称为行间距（row gap）。列与列之间的间距，称为列间距（column gap）。

所有的项目组合在一起，称为内容（content）。

容器是所有项目的父容器。
内容是所有项目的结合体。

网格布局允许指定区域，一个区域由单个或多个单元格组成。开发人员可以人为将某一块划分为一个区域（area）。

网格线之间的空间，称为网格轨道（track）

容器属性：

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 这六个属性的合并简写形式。
从易读易写的角度考虑，建议不要合并属性。

display 属性：

display: grid：指定一个容器采用网格布局，容器元素是块级元素。

display: inline-grid;：指定一个容器采用网格布局，容器元素是内联块元素。

div {
  display: grid | inline-grid;
}

grid-template-rows 属性、grid-template-columns 属性：

grid-template-rows ：定义每一行的行高，属性值可以是固定数值、百分比、fr、auto、repeat() 和 minmax()。

grid-template-columns ：定义每一列的列宽，属性值可以是固定数值、相对于容器宽高的百分比（不包括容器的内边距和边框）、fr、auto、repeat() 和 minmax()。

// 三行三列
.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
}

1. fr：是 fraction 片段的缩写。以比例的方式分配剩余可用空间。

   // 三个相同宽度的列
   .container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
   }
   

   // 首先第一列的宽度为 150px；然后剩余空间分为三份，第三列的宽度是第二列的两倍。
   .container {
     display: grid;
     grid-template-columns: 150px 1fr 2fr;
   }
   

2. auto：先于 fr 计算，获取必要的最小空间。

   // 首先第三列宽度为固定的 150px；然后第一列获取必要的最小空间；最后第二列占据剩余的空间
   .container {
     display: grid;
     grid-template-columns: auto 1fr150px;
   }
   

   

3. repeat()：用来简化重复的值。repeat() 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

   // 三行三列
   .container {
     display: grid;
     grid-template-columns: repeat(3, 150px);
     grid-template-rows: repeat(3, 150px);
   }
   

   repeat() 也可以重复某种模式。

   // 定义了 4 列，第一列和第三列的宽度为 150px，第二列和第四列为 50px
   grid-template-columns: repeat(2, 150px 50px);
   

   单元格的大小是固定的，但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格，可以使用 auto-fill 关键字表示自动填充。

   //每列宽度 150px，然后自动填充，直到容器不能放置更多的列。
   .container {
     display: grid;
     grid-template-columns: repeat(auto-fill, 150px);
   }
   

   

4. minmax()：产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

   // 第二列宽度大于等于 150px，小于等于 300px
   .container {
     display: grid;
     grid-template-columns: 1fr minmax(100px, 300px) 1fr;
   }
   

红色的是水平网格线，蓝色的是垂直网格线。同一根网格线有两个编号，例如：第一根水平网格线，既可以是编号 1，也可以是编号 -4。

grid-template-rows 属性和grid-template-columns 属性中允许使用方括号指定每一根网格线的名字，方便以后的引用。网格布局允许同一根网格线有多个名字，例如：[fifth-line row-5]。

.container {
	display: grid;
	grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
	grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
}

grid-auto-rows 属性、grid-auto-columns 属性、：

有时候，一些项目的位置，会在现有网格的外部。比如网格只有三行三列，但是有 10 个项目，那么第 10 个项目就会出现在第四行，这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-rows：用来定义浏览器自动创建的多余网格的行高。写法与grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的行高。

grid-auto-columns：用来定义浏览器自动创建的多余网格的列宽。写法与 grid-template-columns 完全相同。如果不指定这个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽。

// 划分好的网格是 3 行 3 列；10号 项目出现在第 4 行，行高为 200px
.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
  grid-auto-rows: 200px; 
}

grid-auto-flow 属性：

grid-auto-flow ：用来定义项目的排列顺序。属性值有 row、column、row dense 和 column dense。

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。

1. row：默认值，即先行后列，先填满第一行，再放入第二行。
   

2. column：先列后行，先填满第一列，再放入第二列。
   

3. row dense：先行后列，在后面出现较小的项目时，尝试填充网格中前面的空缺。

   例如：网格设置为散列，但是让 1 号项目和 2 号项目各占据两个单元格。在默认的 grid-auto-flow: row 情况下，会产生下面的布局：由于 1 号项目后面的空间无法放置下 2 号项目，2 号项目换行到下面，3 号项目默认排在 2 号项目后面。
   
   修改为 grid-auto-flow: row dense ，表示先行后列，并且尽可能紧密填满，尽量不出现空格。所以 3 号项目就会紧跟在 1 号项目的后面。4 号项目紧跟在 2 号项目的后面。
   

4. column dense：先列后行，在后面出现较小的项目时，尝试填充网格中前面的空缺。

row-gap 属性、column-gap 属性、gap 属性：

row-gap：设置行与行之间的间距，

column-gap：设置列与列之间的间距。

gap：是 row-gap 和 column-gap 的合并简写形式，语法为 gap: <row-gap> <column-gap>;。如果省略了第二个值，浏览器认为第二个值等于第一个值。

.container {
  row-gap: 20px;
  column-gap: 20px;
}

grid-template-areas 属性：

grid-template-area：用于定义区域。

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为 区域名-start，终止网格线自动命名为 区域名-end。

// 划分出 9 个单元格，然后将其命名为 a 到 i 的 9 个区域，分别对应这 9 个单元格
.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
  grid-template-areas: 
  'a b c'
  'd e f'
  'g h i';
}

多个单元格合并成一个区域的写法如下：

// 将 9 个单元格分成 a、b、c 三个区域
grid-template-areas:
'a a a'
'b b b'
'c c c';

如果某些区域不需要利用，则使用点 .表示。

// 中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域
grid-template-areas: 
'a . c'
'd . f'
'g . i';

align-items 属性、justify-items 属性、place-items 属性：

align-items：设置项目在单元格中的垂直位置（上中下）。

justify-items：设置项目在单元格中的水平位置（左中右）。

place-items：是 align-items 和 justify-items 的合并简写形式，语法为 place-items: <align-items> <justify-items>;。如果省略第二个值，则浏览器认为与第一个值相等。

属性值：

1. stretch：默认值。拉伸，占满单元格的整个宽高。
2. start：对齐单元格的起始位置。
3. end：对齐单元格的结束位置。
4. center：单元格内部居中。

项目并不总是铺满单元格的。
单元格的宽高是通过 grid-template-rows 和 grid-template-columns 定义的。
而单元格中的项目能不能铺满是通过 align-items 和 justify-items 定义的。

.container {
  justify-items: start;
}

align-content 属性、justify-content 属性、place-content 属性：

align-content：设置整个内容区域在容器中的垂直位置（上中下）。

justify-content：设置整个内容区域在容器中的水平位置（左中右）。

place-content：是 align-content 和 justify-content 的合并简写形式，语法为 place-content: <align-content> <justify-content>。如果省略第二个值，浏览器就会假定第二个值等于第一个值。

属性值：

1. stretch：默认值。在单元格大小没有指定的情况下，将拉伸占据整个网格容器。
2. start：对齐容器的起始位置。
3. end：对齐容器的结束位置。
4. center：容器内部居中。
5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
6. space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。
7. space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

.container {
  justify-content: start;
}

项目属性：

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性、grid-row-end 属性：

用来指定项目的位置。项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

使用这四个属性，如果产生了项目的重叠，可以使用 z-index 属性指定项目的重叠顺序。

1. grid-column-start：左边框所在的垂直网格线。
2. grid-column-end：右边框所在的垂直网格线。
3. grid-row-start：上边框所在的水平网格线。
4. grid-row-end：下边框所在的水平网格线。

这四个属性的属性值：

使用这四个属性，如果产生了项目的重叠，可以使用 z-index 属性指定项目的重叠顺序。

1. number：数字，网格线的编号。指定从第几个网格线开始，到第几个网格线结束。

   // 指定第一个项目从第二根垂直网格线开始，到第四根垂直网格线结束
   .col1 {
   	grid-column-start: 2;
   	grid-column-end: 4;
   }
   

   
2. name：名字，网格线的名称。可以使用定义的网格线的名称，或者添加区域之后自动获取到的网格线的名称。

   .container {
   	display: grid;
   	grid-template-columns: [c1] 150px [c2] 150px [c3] 150px;
   	grid-template-rows: [r1] 150px [r2] 150px [r3] 150px;
   }
   .col1 {
   	grid-column-start: c2;
   	grid-column-end: c4;
   }
   

3. span number：跨越的的网格数量。即左右边框（上下边框）之间跨越多少个网格。

   // 指定第一个项目跨越两根垂直网格线
   .col1 {
   	grid-column-start: span 2;
   }
   

grid-column 属性：是 grid-column-start 和 grid-column-end 的合并简写形式。通过斜杠分割，斜杠以及后面的部分可以省略，默认跨越一个网格。。

grid-row 属性：是 grid-row-start 属性和 grid-row-end 的合并简写形式。通过斜杠分割，斜杠以及后面的部分可以省略，默认跨越一个网格。。

.col1 {
  grid-column: 2 / 4;
}

grid-area 属性：

grid-area：指定项目放在哪一个区域。

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
	grid-template-areas:
	'a b c'
	'd e f'
	'g h i';
}
// 第一个项目位于 e 区域
.col1 {
  grid-area: e;
}

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
	grid-template-areas:
	'a a a'
	'b b b'
	'c c c';
}
// 第一个项目位于 b 区域
.col1 {
	grid-area: b,
}

align-self 属性、justify-self 属性、place-self 属性：

align-self：设置项目在单元格中的垂直位置（上中下）。跟 align-items 属性的用法完全一致，也是只作用于单个项目。

justify-self：设置项目在单元格中的水平位置（左中右）。跟 justify-items 属性的用法完全一致，但只作用于单个项目。

place-self：是 align-self 属性和 justify-self 属性的合并简写形式。如果省略第二个值，place-self 属性会认为这两个值相等。