доступно, другие решения, которые являются взломами, будут поражены.
стиемспецификация сеткиЯ понимаю, как выровнять дочерние элементы контейнера сетки, но я хочу выровнять элементыв дети, как если бы они были элементами сетки, а не их контейнером.
По сути, я хочу что-то похожее на это:
В каждом ряду клетки имеют равные высоты с соседними клетками. Каждый ряд не зависит друг от друга.headers в первом ряду высотой 2 строки, ноheaderво 2-м ряду 3 строки.
Содержимое каждого элемента неизвестно, а количество элементов также неизвестно. Таким образом, выравнивание должно применяться динамически, а не жестко задавать высоту любой конкретной ячейки.
Если я правильно понимаю, элементы внутри элемента сетки сами по себе не являются элементами сетки. Можно ли их выровнять так, как если бы они были?
display: contents начинает поддерживаться браузерами, я не думаю,объединяя это сgrid-template-areas будет работать, потому что в этом случае количество элементов сетки является динамическим.
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>