CSS网格布局 - 技术栈

前言

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

网格布局

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

① 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，那么效果图如下：

参考代码

html 复制代码

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