1. 什么是网格布局？

由一系列水平和垂直的线构成的一种布局模式，是一种二维布局系统。

Flex布局是一种轴线布局，只能指定元素针对轴线的位置，可以看做是一维布局。

Grid布局是将容器划分成行和列，产生单元格，然后指定元素所在的单元格，是一种二维布局。

2. 定义一个网格

和弹性盒子应用，在父容器中设置display:grid可以定义一个网格，它的直接子项会变成网格项。

.container{
    display: grid;
}

创建一个一个网格布局后，只生成了一个一列的网格，所以默认情况下子项还是由上往下排列。

3. 定义一个网格

3.1 设置内容区域

grid-template-columns：设置列数。

grid-template-rows：设置行数。

可以使用定长。比如说设置成三列，每列200px，则为：grid-template-columns:200px 200px 200px;

也可以使用fr单位，1fr表示占一份。比如设置成三份等长，则为：grid-template-columns:1fr 1fr 1fr;

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

3.2 设置网格间隙

grid-column-gap：设置列间隙。

grid-row-gap：设置行间隙。

grid-gap：同时设置行和列间隙。

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

tips：grid-gap属性好像已经被删除了，现在改为用gap代替。

3.3 重复构建轨道、auto-fill、minmax()

repeat()

之前创建网格列时，比如我们要创建一个三列的网格，使用的方法是直接写三个 1fr 。

现在我们可以使用repeat来重复构建某些列。同样是创建三个 1fr 。现在我们可以这样写：grid-template-columns: repeat(3 1fr);

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

当然，我们也可以不设置要创建几列，转而改为使用自动填充关键字auto-fill，这样容器会自适应列数。

.container {
  display: grid;
  /*自适应列数，每列200px*/
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 20px;
}

我们上面设置的是每一列200px，但是我们想要设置一个范围，该怎么做呢？

使用minmax()函数。比如设定为：minmax(100px,auto)意思是最小为100px，如果内容大于100px则自动调整。

.container {
  display: grid;
  /*自适应列数，每列最小为200px，最大为1fr*/
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}

4. 基于线的元素放置

上面是定义一个网格，定义网格之后，我们要把元素放入网格中。在网格中，网格线是这样定义的：

我们要通过这些分隔线来放置元素，即指定从哪条线开始，哪条线结束。

grid-column-start：设置子项在第几列开始。

grid-column-end：设置子项在第几列结束。

grid-row-start：设置子项在第几行开始。

grid-row-end：设置子项在第几行结束。

这些属性麻烦了，我喜欢用他们的缩写形式：grid-column(设置列的起始结束) 和 grid-row(设置行的起始结束)。

.container .item{
    /*grid-row: 开始位置 / 结束位置*/
    grid-row: 1 / 3;
    grid-column: 1 / 4;
}

5. grid-template-areas

除了使用上面的grid-column和grid-row来放置元素外，还能使用grid-template-areas来设置。

在父项中使用grid-template-areas来对每个区域设置一个别名，然后在子项中使用grid-area来设置该项处于哪个区域。

这里用一个例子方便理解：

假设初试状态下的样式是这样的：

.container{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
}

这样，我们可以看到它的效果图是：

接着，我们在父项中设置grid-template-areas，在子项中使用grid-area，如下所示：

.container{
    display: grid;
    grid-template-columns: 1fr 3fr;
    /* .表示留空这个格子 */
    grid-template-areas: 
        "header header"
        "sidebar content"
        ". footer";
    gap: 20px;
}
header{
    grid-area: header;
}

aside{
    grid-area: sidebar;
}

article{
    grid-area: content;
}
footer {
    grid-area: footer;
}

根据子项设置不同的grid-area，就可以得到想要的布局，效果图如下所示：

根据MDN开发手册整理而来：developer.mozilla.org/zh-CN/docs/…

css网格布局