相同高度项目的网格，在项目外部带有条件“横幅”，无需明确设置高度

Question

我正在尝试实现以下网格：

HTML结构如下：

.container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  
}

.container > article {
  display: flex;
  margin-top: auto;
}

.item-layout {
  border: solid 1px;
}

.banner {
  background: red;
}

<div class="container">
    <article>
        <div class="wrapper">
            <span class="banner">Banner</span>
            <div class="item-layout">
                <header>header</header>
                <div class="body">content to be expanded</div>
                <footer>footer</footer>
            </div>
        </div>
    </article>
    <article>
        <div class="wrapper">
            <div class="item-layout">
                <header>header</header>
                <div class="body">content to be expanded</div>
                <footer>footer</footer>
            </div>
        </div>
    </article>
    <article>
        <div class="wrapper">
            <div class="item-layout">
                <header>header</header>
                <div class="body">content to be expanded and more content, Lorem ipsum dolor sit amet, consectetur</div>
                <footer>footer</footer>
            </div>
        </div>
    </article>
    <article>
        <div class="wrapper">
        <span class="banner">Banner</span>
            <div class="item-layout">
                <header>header</header>
                <div class="body">content to be expanded</div>
                <footer>footer</footer>
            </div>
        </div>
    </article>
    <article>
        <div class="wrapper">
            <div class="item-layout">
                <header>header</header>
                <div class="body">content to be expanded</div>
                <footer>footer</footer>
            </div>
        </div>
    </article>
</div>

行中项目的高度应与项目外部粘贴的条件横幅相同。项目可能有不同的内容，所以我无法明确设置高度。相反，我想在必要时使用 flex-grow 来扩展项目的“主体”。 使用

grid

表示“容器”，使用

flex

、

flex-direction: column

和

justify-content: flex-end

表示“包装”我能够做到这一点，但如果行中的项目内容没有足够的内容，则会失败，项目将不均匀.

为了克服这个问题，我使用

flex-grow

来“正文”和“项目布局”。现在项目是偶数，但带有“横幅”的项目与其他没有横幅的项目对齐。

知道如何在不明确设置

height

和

min-height

的情况下执行此操作吗？

Answer 1

如果您可以重构 HTML 以删除一些无关的

article

和

.item-layout

包装元素，您可以使用

display: grid

和

subgrid

来管理它。

  .header {
  background: red;
  color: white;
  text-align: center;
  grid-row: 1;
}

.container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(150px, 1fr));
  gap: 1em;
}

.wrapper {
  gap: 0;
  display: grid;
  grid-auto-flow: column;
  grid-row: span 4;
  grid-template-rows: subgrid;
  outline: 1px solid orangegold;
}

.wrapper * {
  outline: 1px solid grey;
  header {
    grid-row-start: 2;
  }

<div class="container">

  <div class="wrapper">
    <span class="header">Banner</span>
    <header>header</header>
    <div class="body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed culpa fugit praesentium. Excepturi eos fuga ex explicabo porro saepe dolor commodi molestias illum, at voluptatum.</div>
    <footer>footer</footer>
  </div>

  <div class="wrapper">
    <span class="header">Banner</span>
    <header>header</header>
    <div class="body">content to be expanded</div>
    <footer>footer</footer>
  </div>

  <div class="wrapper">

    <header>header</header>
    <div class="body">content to be expanded</div>
    <footer>footer</footer>
  </div>

  <div class="wrapper">
    <span class="header">Banner</span>

    <header>header</header>
    <div class="body">content to be expanded</div>
    <footer>footer</footer>
  </div>

  <div class="wrapper">

    <header>header</header>
    <div class="body">content to be expanded</div>
    <footer>footer</footer>
  </div>

</div>