准备迎接 `display: contents;`

去年我曾问过，“我们会为了 CSS 网格而扁平化我们的 HTML 吗？”

问题在于，元素要一起参与同一个 CSS 网格（或 Flexbox）的唯一方法是它们必须是同级元素。因此，在某些情况下，我们可能会为了布局的便利而放弃 HTML 语义（这不太好）。

对此的一个答案是 display: contents;——一个神奇的新显示值，它基本上会使容器消失，使子元素成为 DOM 中上一级元素的子元素。

快进到今天，Chrome 正在 发布它，WebKit 正在 发布它，Firefox 也已 发布它。在 这里为 Edge 投票。

想更好地理解它吗？Rachel Andrew 写了“使用 display: contents 隐藏盒子”，并阐明了它的工作原理

如果您想添加某个元素，因为从文档语义的角度来看它是有意义的，但从显示的角度来看却没有意义，那么这个值就会变得有用。也许您有一些内容被标记为文章，然后该文章是布局中的 Flex 项目，但您真正希望成为 Flex 项目的元素嵌套在该文章中。与其扁平化您的标记并删除文章元素以使这些内部元素成为 Flex 布局的一部分，您可以使用 display: contents 删除文章生成的盒子。然后，您就能两全其美，既有语义标记，又有设计所需的视觉显示效果。这听起来不错。

Manuel Rego 也 尝试解释它

display: contents 使得该 div 不生成任何盒子，因此它的背景、边框和填充不会渲染。但是，像颜色和字体这样的继承属性会按预期对子元素（span 元素）产生影响。

与所有这些都非常相关的还有一个主题：子网格。可能字面意思是 display: subgrid;。就维护语义而言，它可能不如 display: contents; 重要，但也与之不同。

Eric Meyer 称 子网格为 必不可少的

网格布局是在过去二十年中填补这一空白的首个严肃候选方案，我不想看到它们从一开始就被束缚。子网格对于网格的采用至关重要。我希望它们能够尽快实现。

为了理解差异，Rachel Andrew 还写了“为什么 display: contents 不是 CSS 网格布局子网格”

在关于 CSS 网格布局中子网格的谈话中，您不会走得太远，就会有人建议 display: contents 已经解决了大部分问题，那么我们真的需要子网格吗？情况并非如此，display: contents 确实解决了一类问题，但这些问题与子网格可以帮助我们解决的问题不同。