subgrid 进入 CSS Grid 布局模块的 Level 2 规范之前，嵌套网格、subgrid 和 display: contents 就有深度的讨论，最终 subgrid 得到更多的支持，也最终成为规范中的一部分。也就是说，嵌套网格 和 display: contents 都可以实现类似 subgrid 的布局。那这一节中，和大家来探讨 display: contents 和 subgrid 有何差异？

display: contents

CSS 的 display 属性 并不是 CSS 网格布局模块中的特性，它是 CSS Display Module Level 3 中 display 属性新增的一个属性值 contents。 从 CSS 盒模型 中可以知道文档树中的每个元素都是一个矩形框（盒子）。广义上讲，这个”矩形框“由两部分组成。首先，我们有实际的盒子，由border、padding和margin区域组成；其次，我们有盒子的内容，即内容区域：

通过 CSS 的 display 属性，我们可以控制这个盒子及其后代元素以不同的上下文格式（即，产生不同的视觉格式化模型）在浏览器中渲染。每个格式化上下文都拥有自己不同的渲染规则，而这些规则是用来决定其子元素如何定位，以及和其他元素的关系。好比水倒进不同的器皿中，会有不同的形态：

比如，display 值为 inline 会产生一个 IFC、block 会产生一个 BFC、flex（或 inline-flex）会产生一个 FFC 和 grid（或 inline-grid）会产生一个 GFC。

display 属性还有两个值，用来控制标记中定义的元素是否产生一个盒子：

• none值将导致盒子或其内容在页面上不被绘制
• contents值将导致盒子的内容被正常绘制，但周围的盒子被完全忽略

display: contents 是什么？

W3C规范是这样描述 display 的 contents 值：

显式设置 display 属性值为 contents 的元素自身不会产生任何盒子，但它的子元素和伪元素仍会产生盒子，文本运行也正常。对于盒子的生成和布局，该元素必须被视为在元素树中被其内容所取代（包括其源文件的子元素和伪元素，比如 ::befoe 和 ::after 伪元素，它们在该元素的子元素之前（或之后正常生成））。

简单地说，display 为 contents 时允许你以某种方式从盒子树（Box Tree）中移除一个元素，但仍保留其内容。

注意，由于只有盒子树受到影响，任何基于文档树的语义，如选择器匹配、事件处理和属性继承，都不会受到影响。但它也会阻止可访问性工具（比如屏幕阅读器）访问该元素的语义。

使用 display: contents 时会发生什么

理解使用 diplay: contents 时会发生什么的最简单方法是 想象元素的开始和结束标签被从标记中省略。严格地说，对于盒子的生成和布局，该元素必须被视为在元素树中被其内容所取代。

我们通过下面的示例来阐述可能更易于大家理解。假设我们有一个类似下面这样的 HTML 结构：

<!-- HTML -->
<section>
    我是 section 元素的文本节点（文本内容）
    <p>我是一个 p 元素，同时是 section 元素的子元素</p>
</section>

分别给 section 和 p 元素添加一点 CSS 规则：

section {
    border: 6px solid #f44336;
    padding: 2rem;
    background-image: linear-gradient(to right, #09f, #90f);
    text-shadow: 1px 1px 0 rgb(0 0 0 / .85);
    filter: drop-shadow(8px 8px 1px rgb(0 0 0 / .85));
}

p {
    background-color:#607d8b;
    padding: 2rem 1rem;
    font-size: 80%;
    color: #cddc39;
}

你将看到下图这样的效果：

如果你显式在 section 设置 display