With the Grid spec, I understand how to align the children of a grid container, but I want to align elements within the children, as if they were the grid items, rather than their container.
Essentially, I want something that looks like this:
Within each row, the cells have equal heights with their neighboring cells. Each row is independent of each other, though. The headers in the first row are 2 lines tall, but the headers in the 2nd row are 3 lines tall.
The content within each element is unknown, and the number of items is also unknown. So the alignment must be able applied dynamically, rather than hard-coding the height of any specific cell.
If I understand it correctly, the elements within the grid item are not themselves grid items, though. Is it possible to align them as if they were?
display: contents is starting to be supported by browsers, I don't think combining it with grid-template-areas would work, because in this case the number of grid items is dynamic.
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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
