与 the Grid spec ,我了解如何对齐网格容器的子元素,但我想对齐子元素内的元素,就好像它们是网格项,而不是它们的容器。
本质上,我想要这样的东西:
在每一行中,单元格与其相邻单元格的高度相等。但是,每一行彼此独立。第一行的 header
有 2 行高,但是第二行的 header
有 3 行高。
每个元素中的内容是未知的,元素的数量也是未知的。因此对齐必须能够动态应用,而不是硬编码任何特定单元格的高度。
如果我理解正确的话,网格项中的元素本身并不是网格项。是否可以像它们一样对齐它们?
display: contents
开始被浏览器支持,我不认为combining it with grid-template-area
s会起作用,因为在这种情况下,网格项的数量是动态的。
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>
最佳答案
除非您可以使用 display: subgrid
或 display: contents
(更多信息见下文),否则仅使用 CSS 实现此行为的唯一方法是将所有子级单个网格容器中的各种网格项。换句话说,让他们都成为 sibling 。
问题是一个容器中的元素不知道另一个容器中的表亲在做什么。他们没有直接联系,这使他们无法一起工作。另一方面, sibling 一起工作没有问题。
请注意,不建议出于 CSS 的目的“扁平化”HTML 文档,因为它会破坏语义和可访问性。
更多信息:
关于css - 网格项的等高子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48613691/