一、什么是grid布局？
网格布局（Grid）是最强大的CSS布局方案：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。示例如下：
与flex布局的差别：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
二、相关概念
1.容器：需要添加网格布局的父元素
2.项目：项目容器内部采用网格定位的子元素
3.单元格：行和列的交叉区域，称为"单元格"（cell），正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
4.网格线：划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列，正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线：
三、display属性
div{
display: grid;/*指定一个容器采用网格布局。*/
display: inline-grid;/*该元素内部采用网格布局*/
}
默认情况下，容器元素都是块级元素，但也可以设成行内元素。
注意：
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
四、容器属性（写在父级容器中）（以3x3的网格举例）
1.设置列columns 行的高度rows
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
2.repeat repeat()函数 1:重复值 2：重复模式
参数1：重复次数 参数2：像素值
grid-template-columns: repeat(2,100px 200px);
grid-template-rows: repeat(2,100px 200px);
3.fr 关键字 通过关键字划分比例
grid-template-rows: repeat(2,1fr 2fr);
grid-template-columns: repeat(2,1fr 2fr);
4.auto-fit 自动填充每一行 或 每一列
grid-template-columns: repeat(auto-fit,120px);
5.minmax(最小值 最大值)函数
grid-template-columns: 1fr minmax(200px 1fr) 1fr;
grid-template-rows: repeat(3, 1fr);
6.auto关键字 自动适应窗口大小（没有最大最小值）
grid-template-columns: 100px auto 100px;
7. grid-template-columns 网格线 [c1] ~[c4] 中括号内是网格线的名字
grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
8. gap 间隙
/* 列间距 */
/* column-gap: 10px; */
/*行间距 */
/* row-gap: 10px; */
/*合并写法： gap:行间距 列间距 */
gap:10px 20px;
9.area 区域：代表单个或者多个单元格，单引号内分别是单元格的名字（3x3的网格，九个名字）
别名一样相当于合并啊，但是要和grid-area一起用，将元素放进去
grid-template-areas: 'a b c ' 'h j k' 'd e f ';
10 grid-auto-flow 项目的放置顺序：默认横向排列 column竖着排列
grid-auto-flow: column;
11.row dense水平方向填充 column dense垂直方向填充
grid-auto-flow: row dense;
12.缩小内容宽高来使得内容居中(单元格的内容)（宽度和高度只有内容大小）
place-items（合并写法）
justify-items: center;
align-items: center;
/* place-items: center; */
13.设置内容位置（居中）（容器内容 包括间隙）
justify-content: center;
align-content: center;
/* place-content: center; */
五、项目属性（写在项目样式中）
1.用网格线定义单元格列数开始的位置和结束的位置
举例：网格线 列 从第一根开始 第三根结束
grid-column-start: 1;
grid-column-end: 3;
/* grid-column: 1 / 3; */ 合并写法
/* 合并：grid-area：行的开始/列的开始/行的结束/列的结束 */
2. 将该单元格的内容移动到名字为j 的单元格 其他的往前移
grid-area: j;
3.该项目自己的对齐方式：水平居中 垂直居中
justify-self: center;
align-self: center;
六、网络布局练习（两种合并单元格方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 600px;
height: 140px;
margin: 0 auto;
border: 2px solid pink ;
display: grid;
gap: 10px;
grid-template-columns: 102px 135px 135px 102px;
grid-template-rows: repeat(2,55px);
/* 方法1 */
/* grid-template-areas: 'a b c d ' 'a k l d'; */
justify-items: center;
align-items: center;
justify-content: center;
align-content: center;
}
.inner:nth-of-type(1){
/* grid-area: a; */
/* 方法2 */
grid-area: 1/1/3/2;
}
.inner:nth-of-type(6){
grid-area: d;
grid-area: 1/4/3/5;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
二维码
</div>
<div class="inner">ps4/ps5</div>
<div class="inner">taptap</div>
<div class="inner">苹果</div>
<div class="inner">安卓</div>
<div class="inner">PC下载</div>
</div>
</body>
</html>结果如图：
此处我们可以看见，第一个“二维码”盒子和最后一个“PC下载”盒子上下单元格合并
七、骰子点数5练习（用网格布局）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
margin: 0 auto;
height: 300px;
width: 300px;
background-color: gainsboro;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
justify-items: center;
align-items: center;
/* 方法2 （5个div）*/
/* grid-template-areas: 'a c b ' 's d f' 'h j k'; 子元素用grid-area交换位置 */
/* 方法3（5个div）：定义每个点的位置：grid-area：行的开始/列的开始/行的结束/列的结束 */
}
.point{
height: 50px;
width: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="point" style="background-color:black;"></div>
<div class="point"></div>
<div class="point"style="background-color: black;"></div>
<div class="point"></div>
<div class="point"style="background-color: black;"></div>
<div class="point"></div>
<div class="point"style="background-color: black;"></div>
<div class="point"></div>
<div class="point"style="background-color: black;"></div>
</div>
</body>
</html>效果图图：
