CSS网格布局

embedded/2024/12/22 23:19:43/

前言

希望元素按照网格的方式进行布局，最简单的方式就是利用网格布局，如图所示：

网格布局

设置网格布局的核心属性：

① 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>