grid布局
1. 定义网格
display: grid;
/* 将容器分为几行几列，以及每个格子的大小，1fr表示占剩余空间的一份 */
grid-template: repeat(3, 1fr) / repeat(2, 1fr);
/* grid-template: 1fr 1fr 1fr / 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
*/
2. 格子合并
/* 单元格合并，相邻同名的网格会合并须是矩形的，非矩形无效 */
grid-template-areas:
"a a a"
"b c c"
"b c c";
2. 格子间隙
/* 水平垂直间隙 */
gap: 8px 5px;
/*
row-gap: 8px;
column-gap: 5px;
*/
3. 格子内容对齐方式
place-items: center center;
/*
justify-items: center;
align-items: center;
*/
4. 单独设置格子内容对齐方式
/* 该属性用在 grid 或 flex 布局中子元素上，用来设置该元素的对齐方式，使之不再收到place-items的影响 */
.three {
/* 单独设置格子内容对齐方式 */
place-self: start end;
/*
align-self: start;
justify-self: end;
*/
}
5. 网格整体在容器的对齐方式
/* 当网格所占空间小于容器时，使用这两个属性来指定网格整体在容器中的对齐方式 */
place-content: space-arounspace-evenly;
/*
justify-content: space-around;
align-content: space-evenly;
*/
6. 隐式创建的网格列宽和行高
/* 当网格多出指定的数量时，会自动创建，这两个属性指定新创建网格的列宽和行高。
若不指定，浏览器会根据单元格内容的大小，来决定新增网格的列宽和行高。*/
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: grid;
/* 将容器分为几行几列，以及每个格子的大小，1fr表示占剩余空间的一份 */
grid-template: repeat(3, 1fr) / repeat(2, 1fr);
/* grid-template: 1fr 1fr 1fr / 1fr 1fr; */
/* grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr; */
/* 单元格合并，相邻同名的网格会合并，必须是矩形的，非矩形无效 */
grid-template-areas:
"a a a"
"b c c"
"b c c";
/* 设置网格之间的间隙 */
gap: 8px 5px;
/* row-gap: 8px;
column-gap: 5px;*/
/* 设置每个网格中内容的水平垂直对齐方式 */
place-items: center center;
/* justify-items: center;
align-items: center; */
/* grid-template: 60px 60px 60px / 80px 80px; */
/* 当网格所占空间小于容器时，使用这两个属性来指定网格整体在容器中的对齐方式 */
place-content: space-around space-evenly;
/* justify-content: space-around;
align-content: space-evenly; */
/* 当网格多出指定的数量时，会自动创建，这两个属性指定新创建网格的列宽和行高。
若不指定，浏览器会根据单元格内容的大小，来决定新增网格的列宽和行高。*/
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
width: 200px;
height: 200px;
background-color: skyblue;
}
.item {
width: 50px;
height: 50px;
background-color: plum;
}
.three {
/* 单独设置格子内容对齐方式 */
place-self: start end;
align-self: start;
justify-self: end;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item three"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<!-- 多出指定的网格数 -->
<span class="item"></span>
</div>
</body>
</html>
