具有CSS网格布局的网格项目中元素的高度相等

具有CSS网格布局的网格项目中元素的高度相等

可能吗

tldr; Yes.

---

这里的困难在于，每篇文章本身都是一个网格，因此
任何一篇文章都不了解另一篇文章。因此，无法
像文章标题这样的文章中的组件根据
另一文章中标题的高度进行调整。

实际上，有一种方法可以通过CSS网格实现这一目标，并且无需更改任何标记！

我们可以使用CSS“拉平”结构，以便所有文章的所有组件都只是一个CSS网格（文章容器）的一部分。

通过设置文章，甚至无需更改当前标记，这是可能的display: contents

display: contents导致元素的子元素看起来像是元素父元素的直接子元素，而忽略了元素本身。当使用CSS网格或类似布局技术时应忽略包装元素时，这很有用。

所以如果我们用

display: contents

.container article {  display: contents;}

现在，所有的页眉，节和页脚都成为（直接）网格（容器的-具有display:grid）网格项目，我们可以使用该grid- template-areas属性来对其进行排列。

.container {  display: grid;  grid-column-gap: 1em;   grid-template-columns: repeat(3, 1fr);  grid-template-areas: "header1 header2 header3"  "section1 section2 section3" "footer1 footer2 footer3" "header4 header5 header6"  "section4 section5 section6" "footer4 footer5 footer6"}

由于每个页眉/节/页脚恰好占据一个单元格-这迫使它们占据相同的垂直高度。因此，例如header1，header2和header3
都将具有相同的高度，而不管其内容如何。

现在，grid-area在每个单元格上设置属性。

article:nth-child(1) header {  grid-area: header1;}article:nth-child(2) header {  grid-area: header2;}article:nth-child(3) header {  grid-area: header3;}article:nth-child(4) header {  grid-area: header4;}article:nth-child(1) section {  grid-area: section1;}...article:nth-child(4) section {  grid-area: section4;}article:nth-child(1) footer {  grid-area: footer1;}...article:nth-child(4) footer {  grid-area: footer4;}

Finally, set a vertical gap between each row of articles (starting from the
second row of articles):

article:nth-child(n + 4) header {  margin-top: 1em;}

Demo:

body {  width: 100%;  max-width: 1024px;  margin: auto;}.container {  display: grid;  grid-column-gap: 1em;  grid-template-columns: repeat(3, 1fr);  grid-template-areas: "header1 header2 header3""section1 section2 section3"  "footer1 footer2 footer3"  "header4 header5 header6""section4 section5 section6"  "footer4 footer5 footer6"}.container article {  display: contents;}article header {  background-color: #eeeeee;}article section {  background-color: #cccccc;}article footer {  background-color: #dddddd;}article:nth-child(n + 4) header {  margin-top: 1em;}article:nth-child(1) header {  grid-area: header1;}article:nth-child(2) header {  grid-area: header2;}article:nth-child(3) header {  grid-area: header3;}article:nth-child(4) header {  grid-area: header4;}article:nth-child(1) section {  grid-area: section1;}article:nth-child(2) section {  grid-area: section2;}article:nth-child(3) section {  grid-area: section3;}article:nth-child(4) section {  grid-area: section4;}article:nth-child(1) footer {  grid-area: footer1;}article:nth-child(2) footer {  grid-area: footer2;}article:nth-child(3) footer {  grid-area: footer3;}article:nth-child(4) footer {  grid-area: footer4;}<div >    <article>        <header> <h2>Header</h2> <h2>Header</h2>        </header>        <section> <p>Content</p>        </section>        <footer> <p>Footer</p>        </footer>    </article>    <article>        <header> <h2>Header</h2>        </header>        <section> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p>        </section>        <footer> <p>Footer</p> <p>Footer</p>        </footer>    </article>    <article>        <header> <h2>Header</h2>        </header>        <section> <p>Content</p> <p>Content</p> <p>Content</p>        </section>        <footer> <p>Footer</p>        </footer>    </article>    <article>        <header> <h2>Header</h2>        </header>        <section> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p>        </section>        <footer> <p>Footer</p> <p>Footer</p>        </footer>    </article></div>

Codepen Demo)

当然，除了使用grid-template-areas+ grid-area属性，我们还可以使用grid-row+ grid-column属性来实现相同的结果-Codepen

---

注意：我确实意识到上面的内容很冗长，也不是最佳的解决方案-但我的意思是可能的。另外，我们可以使用
SASS循环使该代码更简洁，更可配置。

如果有某种方法可以重复使用某个模式，则可能会很好，grid- template-areas例如：

伪代码（不合法）：

grid-template-areas: repeat("header1 header2 header3"      "section1 section2 section3"     "footer1 footer2 footer3")

…然后，我们可以 使用nth-child设置网格区域，从而获得一种更具动态性的解决方案，该解决方案适用于n商品
解决方案：

article:nth-child(3n + 1) header {  grid-area: header1;}

等等。。。但是我现在不认为这是可能的（或者也许没有必要，因为子电网

---

NB:

Grid Layout Module Level 2引入了Subgrids，这将使此问题更易于解决，而无需使用display: contents

---

Should I use display: table?

对于您需要的布局- display:table不会有太大帮助。首先，您必须完全重组标记，以将文章组件按文章分组在一起，然后必须四处寻找样式，使表格看起来像“文章”，但即使如此-表格也没有包装，所以您d需要将每三篇文章都包装到一个单独的表中。…即使可能，也确实是一团糟且难以维护。