前言
希望元素按照网格的方式进行布局，最简单的方式就是利用网格布局，如图所示：
网格布局
设置网格布局的核心属性：
① display: grid
设置容器为网格布局容器（如果希望设置行内的网格容器，可以设置display: inline-grid）
② grid-gap: 30px;
设置网格之间的距离为30px（也可以通过grid-row-gap单独设置行间距，grid-column-gap单独设置列间距）
③ grid-template-columns: 1fr 1fr 1fr
设置网格共三列，每列网格宽度平均分配（宽度分为3份，每列占一份）
在使用grid-template-columns时网格元素尽量不要设置宽度，而是平均分配
关于长度单位fr（fraction）的使用，请参考：CSS长度单位fr介绍使用
④ grid-template-rows: 1fr 1fr 1fr
设置网格共三行，每行网格高度平均分配（高度分为3份，每列占一份）
在使用grid-template-rows时网格元素尽量不要设置高度，而是平均分配
上面重复的三个1fr可以用函数repeat(3, 1fr)代替，第一个参数为重复次数，第二个为重复数据
一般网格列模板grid-template-columns和网格行模板grid-template-rows只设置一个，如果同时设置就会固定网格的行数和列数
⑤ grid-row: 1 / 2
设置格子元素的起始线为第1条横线（可通过grid-row-start: 1;单独设置），结束线为第2条横线（可通过grid-row-end: 2;单独设置）
网格的分割线如下（黑色为横向分割线，红色为纵向分割线）：
如果将网格1的横向起始线设为1，横向结束线设为3，那么效果图如下：
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>网格布局</h1>
<div class="root">
<div class="box box1">网格1</div>
<div class="box">网格2</div>
<div class="box">网格3</div>
<div class="box">网格4</div>
<div class="box">网格5</div>
<div class="box">网格6</div>
<div class="box">网格7</div>
<div class="box">网格8</div>
<div class="box">网格9</div>
</div>
</body>
<style>
h1 {
text-align: center;
/* 设置字体间距 */
letter-spacing: 26px;
}
.root {
padding: 30px;
position: relative;
width: 60%;
height: 700px;
border: 3px solid #eee;
border-radius: 20px;
margin: 20px auto;
box-shadow: 0 0 20px 10px #eee;
/* 网格布局 */
display: grid;
/* 设置网格固定3列，每列宽度平均分配 */
grid-template-columns: repeat(3,1fr);
/* 设置网格元素间隔为30px */
grid-gap: 30px;
}
.root .box1 {
/* 设置横向起始分割线为第一条，横向结束分割线为第三条 */
grid-row: 1 / 3;
}
.root .box{
background-color: #7fa2ad;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
color: #eee;
}
</style>
</html>
