我在长度为4+的div内有一系列文章，没有任何四舍五入的行标记。我需要将其表示为每行3个文章（列）的表格，大概用display: grid。每篇文章都有一个页眉，一个节和一个页脚。
如何 在每行文章的内部为每个页眉实现相等的高度，为每个部分提供相等的高度以及与文章底部对齐的相等高度的页脚？可能吗 我应该使用display: table吗？
PS我需要根据屏幕宽度动态更改每行的文章数。谢谢
HTML:
body { width: 100%; max-width: 1024px; margin: auto; } .container { display: grid; grid-template-columns: repeat(3, 1fr); } .container article { display: grid; } article header { background-color: #eeeeee; } article section { background-color: #cccccc; } article footer { background-color: #dddddd; } <div class="container"> <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>
注意：不推荐使用JS。
grid-auto-rows: 1fr;
已被提议为重复项，事实并非如此。它将仅使物品具有相等的高度，而例如，每个物品的标题仍保持不同的大小。
可能吗
这里的困难在于，每篇文章本身都是一个网格，因此 任何一篇文章都不了解另一篇文章。因此，无法 像文章标题这样的文章中的组件根据 另一文章中标题的高度进行调整。
实际上，有一种方法可以通过CSS网格实现这一目标，并且无需更改任何标记！
我们可以使用CSS“拉平”结构，以便所有文章的所有组件都只是一个CSS网格（文章容器）的一部分。
通过设置文章，甚至无需更改当前标记，这是可能的display: contents
display: contents导致元素的子元素看起来像是元素父元素的直接子元素，而忽略了元素本身。当使用CSS网格或类似布局技术时应忽略包装元素时，这很有用。
所以如果我们用 display: contents
display: contents
.container article { display: contents; }
现在，所有的页眉，节和页脚都成为（直接）网格（容器的-具有display:grid）网格项目，我们可以使用该grid- template-areas属性来对其进行排列。
.container { display: grid; grid-column-gap: 1em; /* horizontal gap between articles */ 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; }
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 class="container"> <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>
当然，除了使用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需要将每三篇文章都包装到一个单独的表中。…即使可能，也确实是一团糟且难以维护。
