二维（行列）布局，通过容器定义网格轨道，项目定位到网格区域。在复杂布局（如不规则网格）时更简洁，代替传统多嵌套结构。

一、定义网格布局

使用 grid 的布局配置将容器改为网格布局：

.container {
  display: grid;
}

与弹性盒不同的是，在定义网格后，网页并不会立刻发生变化。因为 display: grid 仅是创建了一个只有一列的网格，所有的子项仍像正常的布局那样，自上而下、一个接一个的排布。

我们需要自定义列宽：

.container {
  display: grid;
  /* 三列的宽度分别为 200px 的网格 */
  grid-template-columns: 200px 200px 200px;
}

提示

使用 fr 单位的灵活网格。就像弹性盒中 flex 项的 flex-grow 属性。

在不知道父容器宽度的情况下，想让网格列均匀分布时：

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

1. 网格间隙

使用 column-gap 属性来定义列间隙；使用 row-gap 定义行间隙；使用 gap 定义两者。

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

2. 重复构建轨道组

可以使用 repeat 来重复构建某些宽度配置：

.container {
  display: grid;
  /* 将构建为 1fr 2fr 1fr 2fr 1fr 2fr */
  grid-template-columns: repeat(3, 1fr 2fr);
  grid-gap: 20px 10px;
  gap: 20px 10px;
}

3. 显式网格和隐式网格

显式定义的网格值为显示网格，使用属性 grid-auto-rows/grid-auto-columns 定义的网格为隐式网格。

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

4. minmax() 函数

当有时候无法预测某个元素在不同情况下尺寸时，可以使用 minmax() 函数定义一个不确定的值。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr 2fr);
  /* 该容器在纵轴上至少获取 100px 的长度设定 */
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px 10px;
  gap: 20px 10px;
}

5. 自动使用多列填充

使用 repeat 构建一个重复的列组。而列组使用 auto-fill 进行填充，在重复项的值用 minmax() 函数来限定。这样就可以得到一个优雅的宽度不小于 200px，且随可用空间变化而变化的网格。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100xp, auto);
  grid-gap: 20px 10px;
  gap: 20px 10px;
}

备注

本网站首页的九宫格本来使用的该配置项，但由于网格项使用了 width 值，且横向的 margin 值为 auto，导致网格项不能很好的自适应。

更改后的配置

.docCordList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  justify-content: space-evenly;
  grid-gap: 20px;
  gap: 20px;
}

二、 基于线的元素放置

可以使用分割线来放置元素，指定线的起止：

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

这些属性的值均为分割线序号，也可使用缩写的形式来指定开始与结束的线：

• grid-column
• grid-row

header {
  grid-column: 1/3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 1;
}

footer {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 3;
}

三、 使用 grid-template-areas 放置元素

通过 grid-template-areas 来为每一个块命名，并在网格项使用 grid-areas 来匹配位置

• 必须填满每一个格子
• 对于横跨多个格子的元素，需要重复写该元素占用的 grid-area 属性定义的名字
• 所有名字必须只能出现在一个连续的区域，不能在不同位置出现
• 一个连续的区域必须是一个矩形
• 使用 . 符号，可以让一个格子留空

.container {
  display: grid;
  grid-template-areas:
    'header header'
    'content sidebar'
    'footer footer';
  grid-template-columns: 1fr 200px;
  grid-template-rows: 2.68rem 1fr 1.8rem;
  grid-gap: 20px;
  gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-areas: sidebar;
}

footer {
  grid-area: footer;
}