Question

我在网格布局中组织了一些＆lt; div＆gt;，如下所示：

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/

屏幕上的单元格排列已经改变，因为内部＆lt; div＆gt;不再知道它们是网格的一部分;相反，第一个＆lt;组件＆gt;占用一个单元格，其两个成分＆lt; div＆gt; s被渲染为该单元格内的正常块元素，同样也是第二个。

通常（如果我错了，请纠正我），非标准标签，例如＆lt; component＆gt;对浏览器的渲染器没有任何意义，除非他们通过CSS给出了一些。为什么在这？我可以保留它们，因为它们对我的Angular应用程序很重要，但是告诉渲染器忽略它们并对待每个＆lt; div＆gt;作为网格的一个单元格，就像我的第一个例子一样？

Answer 1

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

网格布局：如何使渲染器忽略中间标记？

1 个答案: