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

Question

我在长度为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;

已被提议为重复项，事实并非如此。它将仅使物品具有相等的高度，而例如，每个物品的标题仍保持不同的大小。

Answer 1

可能吗

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; /* 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;
}

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 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>

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需要将每三篇文章都包装到一个单独的表中。…即使可能，也确实是一团糟且难以维护。