网格布局：如何让渲染器忽略中间标签？答案

【问题标题】：Grid layout: How do I make the renderer ignore intermediate tags?网格布局：如何让渲染器忽略中间标签？
【发布时间】：2018-07-29 18:56:46
【问题描述】：

我正在一个网格布局中组织一些

，如下所示：

CSS

.grid {
  width: 300px;
  display: grid;
  grid-template-columns: 50% 50%;
}

HTML

<div class="grid">
  <div>First cell</div>
  <div>Second cell</div>
  <div>Third cell</div>
  <div>Fourth cell</div>
</div>

https://jsfiddle.net/m47ody94/5/

到目前为止，一切都很好。但是，我使用的是 Angular，并且我想在一个组件中包含每对单元格。 DOM 最终看起来更像这样：

<div class="grid">
  <component>
    <div>First cell</div>
    <div>Second cell</div>
  </component>
  <component>
    <div>Third cell</div>
    <div>Fourth cell</div>
  </component>
</div>

https://jsfiddle.net/m47ody94/6/

屏幕上单元格的排列发生了变化，因为内部的

不再意识到它们是网格的一部分；相反，第一个占据一个单元格，它的两个组成

被呈现为该单元格内的普通块元素，第二个也是如此。

通常（如果我错了，请纠正我），像这样的非标准标签对浏览器的渲染器没有意义，除非它们是通过 CSS 给出的。为什么在这里？我可以保留它们吗，因为它们对我的 Angular 应用程序很重要，但告诉渲染器忽略它们并将每个

视为网格的一个单元格，就像在我的第一个示例中一样？

【问题讨论】：

确实，纠正你：“像这样的非标准标签对浏览器的渲染器没有意义，除非它们是通过 CSS 提供的”是错误的。显然，事实上，鉴于它们被视为网格元素，因为它们只是 display: grid 元素的子节点。
如果你去掉组件，你的项目会容易得多

标签： html angular css grid-layout

【解决方案1】：

截至 2020 年和顶级常青浏览器，其中一种解决方案是使用 display: contents 代替 <component>，因此该标签将被忽略，其内容被呈现为就好像它们被直接分配给其父元素一样。重要的是不要忘记在使用 CSS 选择器或 DOM 操作时仍需要考虑此标记，因此例如设置 div 选择器的样式时需要使用 .grid > component > div。

【讨论】：