一、简介
Grid网格布局，是目前唯一一种CSS二维布局方式，一种新的布局模型，能够同时处理行和列，号称最强大的CSS布局方案。
Grid布局是将容器划分成“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列对应的位置上，从而达到我们布局的效果
二、Grid布局的属性可以分为两大类容器属性，项目属性
2.1容器属性：采用网格布局的区域，称为"容器"（container）
2.1.1 display: grid， display: grid: inline-grid
display: grid 该容器元素为块级元素。
display: inline-grid 该容器元素为行内元素。
2.1.2 grid-template-columns，grid-template-rows
grid-template-columns 属性定义每一列的列宽。
grid-template-rows 属性定义每一行的行高。
注：也可以使用auto子项会自适应父容器剩余的大小去撑开。
.main {
display: grid;
/* 声明了三列，宽度分别为 200px 100px 100px */
grid-template-columns: 200px 100px 100px;
/* 声明了两行，行高分别为 50px 100px */
grid-template-rows: 50px 100px;
}
.main div {
background: pink;
border: 1px solid black;
}
效果图：
2.1.3 grid-row-gap、grid-column-gap、grid-gap 属性
grid-row-gap：设置行间距
grid-column-gap：设置列间距
grid-gap：设置行间和列间距离
.main {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-template-rows: 50px 100px;
margin: 50px;
/* 行间距是10px */
grid-row-gap: 10px;
/* 列间距是20px */
grid-column-gap: 20px;
}
.main div {
background: pink;
border: 1px solid black;
}
.main {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-template-rows: 50px 100px;
margin: 50px;
/* 语法 grid-gap: grid-row-gap grid-column-gap; */
grid-gap: 10px 20px;
}
.main div {
background: pink;
border: 1px solid black;
}
效果图：
2.2 项目属性：容器内部采用网格定位的子元素，称为"项目"（item）
2.2.1 grid-template-areas
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成。
grid-area 属性用于指定单元格放在区域中的哪个位置。
// css 案例1
/* .box {
display: grid;
grid-template-rows: 50px 100px; // 行高
grid-template-areas:
"a a c"
"b b c";
} */
// css 案列2
.box {
display: grid;
grid-template-rows: 100px 100px 100px;
margin: 50px;
grid-template-areas:
"a a c"
"b b c"
"d e f";
}
.a {
grid-area: a;
background: palegoldenrod;
}
.b {
grid-area: b;
background: palegreen;
}
.c {
grid-area: c;
background: paleturquoise;
}
.d {
grid-area: d;
background: peachpuff;
}
.e {
grid-area: e;
background: pink;
}
.f {
grid-area: f;
background: mediumturquoise;
}
// html
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</div>
案例1 详细单元格位置：
案例1 布局效果：
案例2 详细单元格位置：
案例2 布局效果：
三、行、列、单元格、区域、网格线
容器里面的水平区域称为“行”即row，垂直区域称为“列”即column。
行和列的交叉区域，称为“单元格”即cell。正常情况下，n行和m列会产生n 乘 m个单元格。
一定数量的单元格可以组成“区域”即area，区域必须是正方形/长方形的。
划分网格的线，称为“网格线”即grid line。
四、总结
Grid网格布局是最强大的 CSS 布局方案。
Grid网格布局是一种二维布局、更适用于多行和多列布局，可以任意组合不同的网格做出各种各样的布局。
这里就是基本的使用，想学习更多可以参考：
