持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

基本概念

首先，看一张图，了解一下容器和项目(不难理解，容器就是包在外层的元素，项目就是内部的元素)

我们后面会介绍下图的内容

每个grid布局，都有隐藏的网格线，用来帮助定位的。

容器属性

行列分布

grid-template-columns
grid-template-rows

说明：想要多少行/列，就填写相应属性的个数。不填写自动分配

做些准备

我们先画好div，main中包着十个子元素。main此时就是容器(container)，十个子元素就是项目(item)。我们给十个子元素加上不同的颜色

<html>
<head></head>
<style>
    .main {
        width: 600px;
        height: 600px;
        border: 10px solid skyblue;
    }

    .item {
        font-size: 50px;
        color:#FFF;
    }

    .item1 {
        background-color: rgb(164, 233, 231);
    }

    .item2 {
        background-color: rgb(117, 219, 153);
    }

    .item3 {
        background-color: rgb(145, 206, 54);
    }

    .item4 {
        background-color: rgb(190, 166, 218);
    }

    .item5 {
        background-color: rgb(208, 100, 169);
    }

    .item6 {
        background-color: rgb(221, 164, 114);
    }

    .item7 {
        background-color: rgb(68, 87, 174);
    }

    .item8 {
        background-color: rgb(17, 120, 117);
    }

    .item9 {
        background-color: rgb(230, 79, 79);
    }

    .item10 {
        background-color: rgb(68, 58, 204);
    }
</style>
<body>
    <div class="main">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
    </div>
</body>
</html>
复制代码

此时，我们没有添加任何布局。效果如下，可以看到，子元素都已经挤出了容器中。

grid-template-columns

给容器添加属性，布局为grid。设置了三列，每列的宽为100px。

    .main {
        width: 600px;
        height: 600px;
        display: grid;
        border: 10px solid skyblue;
        grid-template-columns: 100px 100px 100px;
    }
复制代码

grid-template-rows

因为我们有四行，然后我们每行都给100px

    .main {
        width: 600px;
        height: 600px;
        display: grid;
        border: 10px solid skyblue;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px 100px;
    }
复制代码

grid布局[1]