Grid 网格布局核心知识梳理

什么是 Grid 布局

CSS 网格布局（CSS Grid Layout）是最强大的 CSS 布局方案。
Grid 布局提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Grid 布局 VS Flex 布局

VS

相似性：

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

区别：

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

基础概念

名称	描述
container （容器）	采用网格布局的区域称为"容器"
item （项目）	容器内部采用网格定位的子元素 称为"项目"
row （行）	容器里面的水平区域称为 "行"
column（列）	垂直区域称为"列"
cell（单元格）	行和列的交叉区域，称为"单元格"
grid line（网格线）	划分网格的线，称为"网格线" 水平网格线划分出行，垂直网格线划分出列。 注：只有容器的直接子元素会参与网格布局

容器属性

Grid 布局的属性分成两类：

一类定义在容器上面，称为容器属性；
另一类定义在项目上面，称为项目属性。

名称	描述
display: grid;	指定一个容器采用网格布局，容器元素都是块级元素（默认情况下）
display: inline-grid;	该元素内部采用网格布局，该容器元素是内联块元素
grid-template-rows	定义每一行的行高： ① 固定数字 ② % ：容器宽高的百分比（不包括内边距和边框） ③ fr：分配剩余可用空间 ④ auto：先于 fr 计算，获取必要的最小空间 ⑤ repeat()：简化重复的值 ⑥ minmax()：取值>=最小值，并且<=最大值
grid-template-columns	定义每一列的列宽： ① 固定数值 ② % ：容器宽高的百分比（不包括内边距和边框） ③ fr：分配剩余可用空间 ④ auto：先于 fr 计算，获取必要的最小空间 ⑤ repeat()：简化重复的值 ⑥ minmax()：取值>=最小值，并且<=最大值
grid-auto-flow	定义项目的排列顺序： ① row：默认值)，先填满第一-行， 再放入第二行； ② column：先填满第一列， 再放入第二列 ③ row dense：在稍后出现较小的项目时，先尽可能的填满第-行，再填满第二行 ④ column dense：在稍后出现较小的项目时，先尽可能的填满第一列，再填满第二列
grid-auto-rows	定义浏览器自动创建的多余网格的行高
grid-auto-columns	定义浏览器自动创建的多余网格的列宽
row-gap	设置行间距
column-gap	设置列间距
gap	是 row-gap 和 column-gap 的简写形式
grid-template-areas	定义区域
align-items	设置项目的垂直位置（上中下） ① stretch (默认值) ：拉伸，占满单元格的整个高 ② start：对齐单元格的起始边缘 ③ end：对齐单元格的结束边缘 ④ center ：单元格内部居中
justify-items	设置项目的水平位置（左中右） ① stretch (默认值)：拉伸，占满单元格的整个宽 ② start：对齐单元格的起始边缘 ③ end： ④ 对齐单元格的结束边缘 ⑤ center：单元格内部居中
place-items	是 align-items 和 justify-items 的合并简写形式
align-content	设置整个内容区域的垂直位置（上中下） ① stretch (默认值)：项目大小没有指定时，拉伸占据整个网格容器 ② start：对齐容器的起始位置 ③ end：对齐容器的结束位置 ④ center：容器内部居中 ⑤ space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍 ⑥ space-between：项目与项目之间的间隔相等，项目与容器边框之间没有间隔 ⑦ space-evenly：项目与项目之间的间隔相等，项目与容器边框之间也是同样长度的间隔
justify-content	设置整个内容区域的水平位置（左中右） ① stretch (默认值)：项目大小没有指定时，拉伸占据整个网格容器 ② start：对齐容器的起始位置 ③ end：对齐容器的结束位置 ④ center：容器内部居中 ⑤ space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍 space-between：项目与项目之间的间隔相等，项目与容器边框之间没有间隔 space-evenly：项目与项目之间的间隔相等，项目与容器边框之间也是同样长度的间隔
place-content	是 align-content 和 justify-content 的合并简写形式
grid-template	是 grid-template-columns、grid-template-rows 和 grid-template-areas 这三个属性的合并简写形式（既不易写也不易读，不建议使用）
grid	grid 是 grid-template-rows、grid-template-columns、 grid-template-areas、grid-auto-rows、 grid-auto-columns、grid-auto-flow 这六个属性的合并简写形式（既不易写也不易读，不建议使用）

项目属性

TIP

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

属性名	描述
grid-column-start	左边框所在的垂直网格线
grid-column-end	右边框所在的垂直网格线
grid-row-start	上边框所在的水平网格线
grid-row-end	下边框所在的水平网格线
值	描述（以上属性指定项目的位置，具体取值如下）
auto	默认值，网格元素按流设置。
number	从第几个网格线开始，到第几个网格线结束
name	通过名字来引用一个命名的网格线
span number	该网格项将跨越所提供的网格数量

属性名	描述
grid-column	是 grid-column-start 和 grid-column-end 的合并简写形式
grid-row	是 grid-row-start 和 grid-row-end 的合并简写形式
grid-area	指定项目放在哪一一个区域
align-self	设置项目的垂直位置（上中下）只作用于单个项目 ① stretch（默认值）：拉伸，占满单元格的整个高 ② start：对齐单元格的起始边缘 ③ end：对齐单元格的结束边缘 ④ center：单元格内部居中
justify-self	设置项目的水平位置（左中右）只作用于单个项目 ① stretch（默认值）：拉伸，占满单元格的整个宽 ② start：对齐单元格的起始边缘 ③ end：对齐单元格的结束边缘 ④ center：单元格内部居中
place-self	是 align-self 和 justify-self 的合并简写形式

常用布局方案的总结

常用布局方案应用场景：

1、流体布局 宽度随屏幕大小变化，高度不变；

2、rem 和 vw 布局 等比例缩放

3、响应式布局 一次开发，多端使用（多用于展示性网站）

4、flex 布局 轴线布局（一维布局）

5、Grid 网格布局 行列布局（二维布局）