全新 CSS 网格布局将彻底改变你的布局思维。原因如下。

第一个 CSS 网格布局使得用水平线和垂直线划分元素区域成为可能。这些线决定了元素子元素的大小和位置。

但这种情况将会改变。

为了理解原因，以及最重要的，如何理解，让我们回顾一下网格第一个版本的工作方式。

例如，此卡片可能是一个网格：

HTML 代码看起来很简单，只有一个父元素和两个子元素：

<div class="card">
  <img class="avatar" src="https://picsum.photos/id/10/200/200"/>
  <h2 class="card__text">Lorem Ipsum</h2>
</div>

CSS 代码使父元素成为网格：

.card {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 10px;
  align-items: center;
}

网格线如下：

另一张卡片可能是另一个孤立的网格：

并且标题可以是另一个网格，以相同的方式构建：

让我们将前面讨论过的组件放在一起，就像这样：

父元素是另一个网格，仅用于定义卡片和标题之间的间距：

.grid {
  display: grid;
  grid-gap: 20px;
}

看起来还不错。

然而，假设现实生活中所有卡牌的内容都相同，未免过于乐观了。所以，让我们更现实一点：

这就是我想向你展示的问题。正如我们所见，这些文本实际上并没有对齐：

幸运的是，新的 CSS 网格布局为这个棘手的问题提供了一个优雅的解决方案！

我们可以定义一条网格线，用于将所有卡片和标题在更高层次上、在各个元素之上划分在一起：

首先，让我们在父级定义一个网格，而不是为每个子级定义多个网格：

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

那么我们使用 new 选项就足够了subgrid。这意味着.header和.card元素都不定义自己的网格线，而是从其父元素继承它们：

.header {
  /* 1 / -1 to make it span across the whole container. */
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.card {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

然后...就完成了！

该示例的完整代码可以在 CodePen 上找到。

CSS Grid Level 2 中的子网格使我们能够定义跨组件对齐规则，即使对于动态内容也能很好地发挥作用。

平心而论，我得说设计师们已经讨论这个问题很久了！也许他们叫法不一样，比如Material Design 里的 keylines，但无论如何，这对他们来说并不新鲜！

那么，新规范是否意味着间距的涅槃？还没有。通过观察一些关于子网格扩展可能性的持续讨论，我们发现仍有一些改进空间。但这已经是朝着统一设计师和开发者思维方式迈出的一大步。现在，当有人说“我们需要将这些组件与这条线对齐”时，我们实际上可以编写“这条线”的代码。