Grid布局（栅格布局/网格布局）

Grid布局模式，又称为栅格布局，也叫做网格布局。这种布局是基于网格，使用行列的方式来描述网页布局。

浏览器兼容性

下表是每种浏览器支持Grid布局的最低版本。

布局方式
flexbox	57.0	16.0	52.0	10	44

Grid元素

Grid元素分为两类，Grid容器和Grid项，前者为父元素，后者为父元素中的子元素。如下所示：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

运行一下

display属性

如果要定义一个grid容器元素，把它的display属性设置成grid或inline-grid即可。

.grid-container {
  display: grid;
}

运行一下

.grid-container {
  display: inline-grid;
}

运行一下

---

Grid容器的直接子元素都会自动成为Grid项。注意啊，是直接子元素，不是孙元素啊啊啊！

---

Grid列（Grid Columns）

Grid项竖向成列的就是所谓的Grid列。

Grid行（Grid Rows）

Grid项横向成行的就是所谓的Grid行。

Grid间隙（Grid Gaps）

Grid行列中的间隙就是Grid间隙，行与行之间的空隙就是行间隙，列与列之间的间隙就是列间隙。

在设置Grid容器时，可以对相关Grid间隙属性进行声明定义：

• grid-column-gap - 列间隙
• grid-row-gap - 行间隙
• grid-gap - 通吃列间隙和行间隙

案例1：定义列间隙

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

运行一下

案例2：定义行间隙

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

运行一下

案例3：通吃行列间隙（2个取值）

下例中的50px代表行间隙，100px代表列间隙。

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

运行一下

案例4：通吃行列间隙（1个取值）

下例中的50px代表行间隙和列间隙都为50px宽。

.grid-container {
  display: grid;
  grid-gap: 50px;
}

运行一下

Grid线

Grid线分为2类，行线和列线。

如下所示，列与列之间的线就是所谓的列线。（Column Lines）
如下所示，行与行之间的线就是所谓的行线。（Row Lines）

如下所示，根据Grid线的方式来定义某个具体的Grid项的布局。

案例1：跨列

#item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

运行一下

案例2：跨行

#item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

运行一下