grid布局

最新推荐文章于 2025-06-25 16:24:16 发布

原创最新推荐文章于 2025-06-25 16:24:16 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #网格

css 专栏收录该内容

12 篇文章

订阅专栏

网格单元格布局

一、定义一个网格
给父容器的display属性设置为grid或者inline-grid来定义一个网格，使用grid-template-columns和grid-template-rows来创建网格；

1、grid-template-columns：100px 100px 100px 100px;
说明：把容器分成了4列，没列的宽度为100px;

2、grid-template-rows：200px 200px 200px;
说明：把容器分成了3行，没行的高度为200px;

二、子元素选中区域
子元素设置
grid-column-start: 1; //网格单元个列的起始线
grid-column-end: 2; //列的终止线，，不包括本条
grid-row-start: 1; //行的起始线
grid-row-end: 2； //行的终止线，，不包括本条
4个属性来设置选中的区域

网格区域：grid-area属性，包活了上面的四个属性
grid-area：row-start/column-start/row-end/column-end；
来直接选择区域，并设置；

写个小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        .box{
            width:800px;
            height:600px;
            border:1px solid red;
            margin:20px auto;
            display:grid;
            grid-template-columns:200px 200px 200px 200px;
            grid-template-rows:200px 200px 200px;
        }
        .box div{
            color:#fff;
            font-size:60px;
            text-align: center;
            vertical-align: middle;
        }
        .a{
            grid-area:1/1/3/2;
            background:red;
        }
        .b{
            grid-area:1/2/2/5;
            background:blue;
        }
        .c{
            grid-area:3/1/4/2;
            background:yellow;
        }
        .d{
            grid-area:2/2/4/3;
            background:green;
        }
        .e{
            grid-area:2/3/3/5;
            background:gray;
        }
        .f{
            grid-area:3/3/4/5;
            background:#4DA1FF;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
        <div class="d">d</div>
        <div class="e">e</div>
        <div class="f">f</div>
    </div>

</body>
</html>

效果图
这里写图片描述