网格项目的等高子项

时间：2018-02-04 22:35:24

标签： css css3 alignment css-grid

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

基本上，我想要一些看起来像这样的东西：

Grid-item sub-elements aligned as described above

在每一行中，细胞与其相邻细胞具有相等的高度。但是，每行彼此独立。第一行中的header高2行，但第2行中的header高3行。

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

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

display: contents开始受到浏览器的支持，我不认为combining it with grid-template-areas会起作用，因为在这种情况下，网格项的数量是动态的。

＆＃13;
＆＃13; 
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 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

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

问题是，一个容器中的元素不知道它的另一个容器中的表兄正在做什么。它们没有直接连接，这阻止了它们一起工作。另一方面，兄弟姐妹在一起工作没有问题。

请注意＆＃34;展平＆＃34;建议不要使用CSS文档来破坏语义和可访问性。

更多信息：

相关问题
最新问题