网格项的等高子项

Question

使用 the Grid spec，我了解如何对齐网格容器的子元素，但我想对齐子元素中的元素，就像它们是网格一样物品，而不是它们的容器。

基本上，我想要这样的东西：

在每一行中，单元格与其相邻单元格的高度相等。但是，每一行彼此独立。第一行的 header 是 2 行高，但是第二行的 header 是 3 行高。

每个元素中的内容未知，项目数也未知。因此对齐必须能够动态应用，而不是硬编码任何特定单元格的高度。

如果我理解正确的话，网格项中的元素本身并不是网格项。是否可以像它们一样对齐它们？

display: contents 开始被浏览器支持，我认为行不通，因为在这种情况下网格项的数量是动态的。

main {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-gap: 20px 20px;
}

header { background-color: lightblue }
.content { background-color: lightgreen }
footer { background-color: yellow }

<html>
  <body>
    <main>
      
      <article>
        <header>head</header>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mi diam. Sed pulvinar ex et consectetur venenatis. Duis ligula odio, lobortis a pretium vel, auctor a ante. Nullam nec sem ante. Ut ut interdum metus.  </div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head head head head head head head head head head </header>
        <div class="content">Pellentesque sed nisl vel velit porta mattis. Sed luctus euismod mi, in viverra mi lacinia in. Donec euismod magna metus, vel lacinia sem dignissim non.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">Nulla pretium id enim quis rutrum. Donec lacinia mauris vel risus volutpat facilisis.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">Pellentesque ut scelerisque nisl, ut cursus velit.  </div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>head</header>
        <div class="content">lorum ipsum.</div>
        <footer>foot</footer>
      </article>
      
      <article>
        <header>headhead head head head head head head head head head head head head head head </header>
        <div class="content">Donec porttitor massa purus. Pellentesque hendrerit placerat risus vitae hendrerit. Fusce vitae elit dictum, pharetra lacus sodales, volutpat enim.</div>
        <footer>foot</footer>
      </article>
      
    </main>
  </body>
</html>

Answer 1

除非您可以使用 display: subgrid 或 display: contents（更多信息见下文），否则仅使用 CSS 实现此行为的唯一方法是将各种网格的所有子元素放入单个网格容器中的项目。换句话说，让他们都成为兄弟姐妹。

问题是一个容器中的元素不知道它在另一个容器中的表亲在做什么。他们没有直接联系，这使他们无法一起工作。反观兄弟姐妹，一起工作没问题。

请注意，不推荐 "flattening" HTML 用于 CSS 目的的文档，因为它会破坏语义和可访问性。

更多信息：

What is an alternative to css subgrid?

网格项的等高子项

Equal height children of grid items

css

alignment

css-grid