推荐一款比flex更强大的CSS布局——Grid布局

flex 布局是一维布局

Grid 布局是二维布局

flex 布局一次只能处理一个维度上的元素布局，一行或者一列

Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格。

Grid基础

display：grid 或 display：inline-grid 来创建一个网格容器

grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列

一个网格单元是在一个网格元素中最小的单位

划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序

grid-template-columns 属性和 grid-template-rows 属性

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

.wrapper {

display: grid;

/* 声明了三列，宽度分别为 200px 100px 200px */

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

grid-gap: 5px;

/* 声明了两行，行高分别为 50px 50px */

grid-template-rows: 50px 50px;

}

repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

.wrapper-1 {

display: grid;

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

grid-gap: 5px;

/* 2行，而且行高都为 50px */

grid-template-rows: repeat(2, 50px);

}

auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格

.wrapper-2 {

display: grid;

grid-template-columns: repeat(auto-fill, 200px);

grid-gap: 5px;

grid-auto-rows: 50px;

}

fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。

.wrapper-3 {

display: grid;

grid-template-columns: 200px 1fr 2fr;

grid-gap: 5px;

grid-auto-rows: 50px;

}

minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。

.wrapper-4 {

display: grid;

grid-template-columns: 1fr 1fr minmax(300px, 2fr);

grid-gap: 5px;

grid-auto-rows: 50px;

}

auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。

.wrapper-5 {

display: grid;

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

grid-gap: 5px;

grid-auto-rows: 50px;

}

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的

.wrapper {

display: grid;

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

grid-gap: 10px 20px;

grid-auto-rows: 50px;

}

.wrapper-1 {

display: grid;

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

grid-auto-rows: 50px;

grid-row-gap: 10px;

grid-column-gap: 20px;

}

grid-template-areas 属性

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成