前言
希望元素按照网格的方式进行布局，最简单的方式就是利用网格布局，如图所示：
网格布局
设置网格布局的核心属性：
① 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>
