使用 CSS 网格布局使网格项内的元素高度相等

2024-05-18

我在长度超过 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 已被弃用。

https://codepen.io/yudnikov/pen/mBvbGW?editors=1100#0 https://codepen.io/yudnikov/pen/mBvbGW?editors=1100#0

这个解决方案 https://stackoverflow.com/q/44488357/150926:

grid-auto-rows: 1fr;

已被提议作为副本，但事实并非如此。它只会给文章相同的高度，而例如每篇文章的标题保持不同的大小。

我最初有这个问题：

And the grid-auto-rows: 1fr解决方案结果如下：

有可能吗？

太棒了；是的。

Codepen 演示 #1 https://codepen.io/danield770/pen/Jrqbxe

Codepen 演示#2 https://codepen.io/danield770/pen/yPLQmM?editors=1100（使用SASS并且是可配置的）

The difficulty here is that each article is a grid within itself and therefore any one article has no knowledge about another. Because of this, there is no way for a component of one article like a header to adjust according to the height of a header in another article.

实际上有一种方法可以使用 css 网格来实现此目的，并且无需更改任何标记！

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

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

显示：内容 https://drafts.csswg.org/css-display/#valdef-display-contents (caniuse https://caniuse.com/#feat=css-display-contents)

From Caniuse https://caniuse.com/#feat=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;
}

最后，设置每行文章之间的垂直间隙（从第二行文章开始）：

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 演示） https://codepen.io/danield770/pen/pWmbNL

当然，不是使用grid-template-areas + grid-area我们可以使用以下属性grid-row + grid-column属性来达到相同的结果 -Codepen 演示 https://codepen.io/danield770/pen/Jrqbxe?editors=1100#0

Note:我确实意识到上面的内容很冗长并且不完全是最佳解决方案 - 但我的观点是有可能的. Also, 我们可以使用 SASS 循环使代码更加简洁并且可配置 https://codepen.io/danield770/pen/yPLQmM?editors=1100.

如果有什么办法的话可能会很好重复一个模式 using grid-template-areas- 就像是：

伪代码（不合法）：

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

...然后我们可以获得一个更动态的解决方案，适用于n通过使用 nth-child 设置网格区域来解决文章问题，例如：

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

等等......但我认为目前这是不可能的（或者也许没有必要，因为subgrids https://drafts.csswg.org/css-grid-2/#subgrids能够做到这一点吗？）

NB:

网格布局模块 Level 2 介绍Subgrids https://drafts.csswg.org/css-grid-2/#subgrids这将使这个问题更容易解决，而无需使用display: contents

我应该使用 display: table 吗？

对于您需要的布局 -display:table没有多大帮助。首先，您必须完全重组您的标记以进行分组文章组成部分与文章相比，您必须将表格样式设置为看起来像“文章”，但即便如此 - 表格不会换行，因此您需要将每三篇文章换行到一个单独的表格中......即使有可能，它也会非常混乱且难以维护。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)