如何实现带外置条件Banner的等高Grid布局（无需显式设置高度）

问题说明 #

需要实现如下网格布局：

核心需求：

• 每行网格项高度完全一致
• 带Banner的项需将Banner置于网格项主体外部
• 内容动态可变，无法设置固定高度/最小高度，依靠flex-grow让内容区域按需扩展

现有代码如下：

现有CSS #

.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;
}

现有HTML #

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

此前尝试遇到的问题：

• 给wrapper设置flex列布局+justify-content: flex-end，行内内容不足时高度无法统一
• 给body和item-layout加flex-grow后高度一致，但带Banner与不带Banner的项对齐错位

解决方案 #

调整CSS代码如下，无需设置任何固定高度/最小高度：

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

/* 让article成为flex列容器，确保内部元素能填充网格行高度 */
.container > article {
  display: flex;
  flex-direction: column;
}

/* wrapper设置为flex列布局，自动填充article的可用高度 */
.wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* item-layout设为flex列，自动填充wrapper的剩余高度 */
.item-layout {
  border: solid 1px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 让内容区域自动扩展，填充item-layout的剩余空间 */
.body {
  flex-grow: 1;
}

.banner {
  background: red;
  margin-bottom: 8px; /* 可选：给Banner和主体之间添加间距 */
}

关键调整逻辑 #

1. article设为flex列布局：确保每个网格项的内部容器能自动适配网格行的高度，保证整行所有项高度统一
2. wrapper添加flex-grow: 1：让wrapper占满article的全部可用高度，无论是否包含Banner，都能和其他项保持对齐基准一致
3. item-layout设为flex列+flex-grow: 1：让主体区域在wrapper内部自动填充剩余高度，带Banner的项会预留Banner的高度，主体区域填充剩下的空间，和不带Banner的项主体高度完全匹配
4. body添加flex-grow: 1：让内容区域自动扩展，填充主体的剩余空间，确保header和footer始终固定在顶部和底部

通过以上调整，即可完全满足需求：每行网格项高度统一，Banner独立于主体外部，内容区域自动适配动态内容，无需依赖固定高度设置。

内容的提问来源于stack exchange，提问作者engray