5分钟学会 CSS Grid

栅格（Grid）布局是现在主流的网页设计，CSS Grid 模块是目前最简单的布局创建模式，单从布局方面已经超越了 Bootstrap。

这个布局的兼容性目前也很不错，主流浏览器均兼容，包括 App 原声的 WebView 模块内核。

不多说了，直接开始！

第一个布局

CSS Grid 布局的核心 DOM 结构为 wrapper（parent） 和 items（children）；wrapper 为实际的 grid 容器，items 则为 grid 容器中的内容元素。

我们在一个 wrapper 容器中创建 6 个 item：

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

将 wrapper div 设置为 grid

.wrapper {
  display: grid
}

显示如下：（我自己添加了样式，不影响 grid 布局）

行（rows）和列（columns）

栅格布局我们最需要的是关于行和列的设置。
这里我们设置 2 行 3 列。我们用到的命令是 grid-template-rows 和 grid-template-columns。

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px
}

命令的参数值代表第 n 行（或者列）的尺寸大小，效果如下：

我们更改一下对应的值，可以看见他们的关系

.wrapper {
  display: grid;
  grid-template-columns: 200px 50px 100px;
  grid-template-rows: 50px
}

这里 grid-template-rows 的第 2 行并没有设置值，高度会匹配内容高度，效果如下：

布局 items

下一步就是在 wrapper 容器中对 items 进行布局。这里我们可以看到 grid 布局的强大。

我们创建一个 3 x 3 的 grid：

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px
}

效果如下：

这里我们只看见一个 3 x 2 的布局，当 items 个数不够的时候，我们看到第 3 行的布局并没有 items 填充，这仅仅是为了后续的操作进行准备

布局 items 我们用到 grid-column 和 grid-row 命令：

.item1 {
  grid-column-start: 1;
  grid-column-end: 4
}

item1 的在列（column）方向开始 grid line 为第 1 个，结束 grid line 为 第 4 个，跨度为 3 个 grid。

当 grid 跨度超出定义的最大 grid 个数 时候，效果会变得不可控，所以尽量保持 grid 跨度 <= 定义最大 grid 个数

这里我们可能对 grid line 的概念不是很清楚，下图可以很好的让我们理解什么是 grid line，以及应该如何设置他们的值。

这里需要注意的是，grid-column 和 grid-row 命令的效果都是基于初始布局而定的，并不是渐进的。也就是说，items 布局效果仅仅与 wrapper 容器初始设置有关系。

确认理解了 grid line 的概念之后，我们来个复杂的布局。我们再实际布局中，后台循环一组列表并给定 class，需要按照特定顺序进行布局。（在 grid 布局中，可以按照任意次序进行布局了）

.item1 {
  grid-column-start: 1;
  grid-column-end: 4
}

.item3 {
  grid-row-start: 2;
  grid-row-end: 4
}

.item4 {
  grid-column-start: 2;
  grid-column-end: 4
}

效果如下：

响应式 grid 布局

.wrapper {
  display: grid;
  width: 100%;
  height: 100%;

  grid-template-columns: 1fr 2fr 1fr;
  grid-column-gap: 1em;
  grid-template-rows: 2fr 1fr 2fr;
  grid-row-gap: 1.5em
}

fr（剩余空间分配数）是一个比例单位， items 之间的间距可以使用 grid-row-gap 和 grid-column-gap 设置。

关于流式布局忽略 row 相关设置，让 items 按照内容适配即可。

响应效果如下：

组合布局

我们可以看到 grid 布局的优势在于栅格系统的便捷设置（DOM 布局以及CSS 设置）。并且我们可以和其他布局模式进行灵活组合，更好地适配我们的 App 应用。比如： grid + flex 。