前两个有关于 CSS Grid 案例，主要介绍了如何使用 CSS Grid 来构建 重叠布局 和 Full-Bleed 布局。今天我们来一起再来看另一个由 CSS Grid 构建的网格布局，即 交叉布局。通过这个案例来更好的帮助我们更进一步理解 CSS Grid 的相关属性在实际中（Web 布局）如何使用。

什么是交叉布局

什么是交叉布局？或者说交叉布局是什么样子的。使用一张图来向大家展示什么是交叉布局，毕竟一图胜过千言万言。

我们可以在上面的每个不同的颜色区域中填充 Web 中所需要的媒体元素：

上面这样的 UI 布局常称为 交叉布局。我们可以在这个基础进行扩展，让其变得更复杂一点：

看上去不复杂，很简单，对吧。我在 CodePen 上搜索了一下交叉布局，可以找到相似的布局效果。比如 @Soapp使用 CSS Grid 构建的布局：

接下来，我们就以此例作为今天的目标，看看使用 CSS Grid 布局这样的布局会用到网格布局哪些特性。

网格骨架

使用浏览器网格审查器，可以一目了然的知道@Soapp使用 CSS Grid 构建的布局的网格分布：

在 CSS Grid 中，我们可以使用很多方法来定义上图这样的网格，来构建所需的布局。如果忽略布局的中的内容元素（内容可以根据你的喜好填充），就留下了网格形态和一个网格骨架图：

从上图的网格骨架图中，不能发现，我们需要显式创建一个 4 x 3 (三行四列) 的网格，同时每个网格项目都有相应的网格单元格合并（跨越列或跨越行）。

不难发现，这是一个含有五个网格项目的网格布局，相应的 HTML 结构如下：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item">
        <!-- 跨越3列 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 2行 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 2行 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 2列 -->
    </div>

    <div class="grid__item">
        <!-- 跨越 3列 -->
    </div>
</d