关于 CSS 网格布局的几个有趣的事实

几周前 我举办了一个 CSS 网格布局工作坊。由于我和大多数人一样，对这个主题也很陌生，我在准备幻灯片和演示的过程中学到了很多东西。
我决定与您分享一些对我来说特别有趣的东西。

玩得开心！

小于 -1 的负值可用于 grid-row-end 和 grid-column-end

在许多代码示例和教程中，您会看到可以使用 grid-column-start: 1 和 grid-column-end: -1（或简写 grid-column: 1 / -1）来使元素从第一行跨越到最后一行。我的朋友 Max 提醒我，也可以使用比 -1 更小的值。

.grid-item {
  grid-column: 1 / -2;
}

例如，您可以设置 grid-column: 1 / -2 来跨越第一行和倒数第二行之间的单元格。

查看 CodePen 上 Manuel Matuzovic (@matuzo) 的作品 从第一行跨越到倒数第二行的网格项。

可以在 grid-column/row-start 中使用负值

关于负值的另一个有趣之处是，您也可以在 grid-column/row-start 上使用它们。正值和负值之间的区别在于，使用负值时，放置将从相反方向进行。如果将 grid-column-start 设置为 -2，则该项将放置在倒数第二行。

.item {
  grid-column-start: -3;
  grid-row: -2;
}

查看 CodePen 上 Manuel Matuzovic (@matuzo) 的作品 grid-column/row-start 中的负值。

生成的伪元素 (::before 和 ::after) 被视为网格项

使用 CSS 生成的伪元素如果在网格容器中，似乎很明显会变成网格项，但我不确定这一点。所以我创建了一个快速演示来验证它。在下面的 CodePen 中，您可以看到 如果生成的元素在相应的容器中，则会变成网格项和弹性盒项。

查看 CodePen 上 Manuel Matuzovic (@matuzo) 的作品 实验：伪元素作为网格项。

为 CSS 网格布局属性添加动画

根据 CSS 网格布局模块级别 1 规范，有 5 个可添加动画的网格属性

• grid-gap、grid-row-gap、grid-column-gap
• grid-template-columns、grid-template-rows

目前，只有 grid-gap、grid-row-gap、grid-column-gap 的动画已实现，并且仅在 Firefox 和 Firefox Mobile 中实现。我写了 一篇关于为 CSS 网格布局属性添加动画的文章，其中您将找到更多详细信息和演示。

grid-column/row-end 的值可以小于起始值

在 CSS 网格花园游戏 的第 4 级中，我了解到 grid-column-end 或 grid-row-end 的值可能小于相应的起始值。

.item:first-child {
  grid-column-end: 2;
  grid-column-start: 4;
}

以上代码中的项将从第 4 行开始，并在第 2 行结束，或者换句话说，从第 2 行开始，并在第 4 行结束。

查看 CodePen 上 Manuel Matuzovic (@matuzo) 的作品 小于 grid-column-start 的 grid-column-end 值。

在 grid-column/row-start 和 grid-column/row-end 上使用 `span` 关键字

默认情况下，网格项跨越单个单元格。如果要更改它，span 关键字非常方便。例如，设置 grid-column-start: 1 和 grid-column-end: span 2 将使网格项跨越两个单元格，从第一行到第三行。

您也可以在 grid-column-start 中使用 span 关键字。如果将 grid-column-end 设置为 -1，并将 grid-column-start 设置为 span 2，则网格项将放置在最后一行并跨越 2 个单元格，从最后一行到第三行。

查看 CodePen 上 Manuel Matuzovic (@matuzo) 的作品 CSS 网格布局：span 关键字。

grid-template-areas 和隐式命名行

如果在网格中创建模板区域，您将自动获得四条隐式命名行，其中两条命名 row-start 和 row-end，另外两条命名 column-start 和 column-end。通过将 -start 或 -end 后缀添加到区域名称，它们像任何其他命名行一样适用。

.grid {
  display: grid;
  grid-template-columns: 1fr 200px 200px;
  grid-template-areas: 
    "header header header"
    "articles favorites posts"
}

.footer {
  grid-column-start: favorites-start;
  grid-column-end: posts-end;
}

查看 此 CodePen 中隐式命名行的示例。

网格在 Microsoft Edge 的内部版本中可用

自从所有主要浏览器（IE 和 Edge 除外）都支持 CSS 网格布局以来，它的支持度非常棒。对于许多项目，您现在就可以 开始使用 CSS 网格布局。Microsoft Edge 对它的支持可能会很快到来，因为它已经在 Microsoft Edge 的内部版本中可用。

如果您想了解更多关于网格的信息，请查看 网格完整指南、CSS 网格入门、Grid By Example 以及我的 CodePen 上的网格演示集。