第二

在学习grid布局之前，我们需要了解一些基本概念

1.容器和项目

采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”

<div class="wrapper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

上面的代码中，wrapper就是容器，item就是项目

1.1 行、列和单元格

容器里面的水平区域称为“行”，垂直区域称为“列”，行列重叠出来的空间组成单元格

1.2 网格线

划分网格的线，称为”网格线“

黄色的代表是列的网格线，绿色代表的是行的网格线

 

Grid和flex类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性

2 容器属性

2.1 display属性

display:grid指定一个容器为网格布局

html部分：

<div class="wrapper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

css部分

.wrapper{
            width:450px;
            background: #f3f3f3;
            text-align:center;
            display: grid;
            grid-template-columns: 150px 150px 150px;
            grid-template-rows: 150px 150px 150px
        }
        .item{
            text-align: center;
            border:1px solid #fff;
            color:#fff;
            font-weight: bold;
            line-height: 150px;
        }
        .item:first-of-type{
            background:#ef342a
        }
        .item:nth-of-type(2){
            background:#00a0a0;
        }
        .item:nth-of-type(3){
            background:#a0a0ff;
        }

在这里我定义的三个网格都是宽高为150px

当然啦，我们也可以把它定义为行内元素，该元素内部就采用网格布局