简介

网格布局可以将容器划分为各种网格，可以对这些网格进行任意的组合，组成网格分界线的有行网格线和列网格线，由两两相邻的行网格线和列网格线组成的单元格叫做网格单元格。

注意：划分的网格并不是div，div存在与划分的网格之中，具体看以下实例。

    <div class="container">
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
    </div>

        .container {
   
            width: 600px;
            height: 600px;
            border: 1px solid red;
            display: grid;
        }
        .container div {
   
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            border: 1px solid red;
        }

设置成网格布局后页面被划分为三个网格，三个div分别在一个网格中

常用属性

grid-template-columns

定义每一列的列宽

px
%
auto（自动适应）
fr（份）
repeat()
auto（将剩余控件全部填满）

grid-template-columns: 200px 100px auto;

grid-template-rows

定义每一行的行高

px
%
auto（自动适应）
fr（份）
repeat()
auto（将剩余控件全部填满）

       .container {
   
            width: 600px;
            height: 600px;
            border: 1px solid red;
            display: grid;
            grid-template-columns: 200px 100px auto;
            grid-template-rows: 2fr 1fr 4fr;
        }

每一行的行高比例按照2:1:4

justify-items、align-items

单元格内容水平方向对齐方式和垂直方向对齐方式

start
end
center
stretch(默认)

justify-items: center;

justify-content、align-content

整个网格在容器中的水平和垂直方向上的对齐方式

start(默认)
end
center
space-between（两端对齐）
space-around（网格之间间隙相同，与容器的间隔是网格之间间隙的一半）
space-evenly（各网格之间间隙相同且与容器的间隔也相同）

justify-content: center;
align-content: center;

给网格设置列宽总长小于容器的宽度或者行高总和也小于容器的高度时可以改变网格在容器中的位置

grid-column、grid-row

grid-column（列的开始和结束）
grid-row（行的开始和结束）

给网格设置一下列宽

将第三个div把下面的区域也填充，就可以用grid-column控制列的开始和结束

        .d3 {
   
            grid-column: 3/4;
            grid-row:1/3; 
        }

水平方向上第3根线到第四根线，垂直方向上第1根线到第三根线