如何用HTML/CSS实现商品等高网格及自适应高度横幅

要解决你遇到的问题，核心是让横幅脱离网格行的强制拉伸，同时保留商品项的等高特性，以下是两种可行方案：

方案一：用align-self: start快速解决（推荐） #

问题根源在于grid-auto-rows: 1fr会让所有网格行高度统一，而Grid子项默认的align-self: stretch会让横幅填充整个行高。给横幅单独设置align-self: start，就能让它仅占据自身内容高度，同时不影响商品项的等高效果。

修改后的CSS代码： #

.product-list{
    display: grid;
    gap: 2rem;
    grid-auto-rows: 1fr; /* 保持商品项所在行高度统一，实现等高 */
    grid-template-columns: repeat(3,1fr);
}

.product-list .grid-item.banner{
    grid-row-start: 2;
    grid-column: 1/-1;
    align-self: start; /* 关键：让横幅不拉伸，自适应内容高度 */
}

原理：

• grid-auto-rows: 1fr确保所有自动生成的网格行高度一致，商品项默认align-self: stretch会填充整个行高，自然实现等高。
• align-self: start让横幅在网格单元格内顶部对齐，高度仅由自身内容决定，不会被强制拉成行高。

方案二：拆分布局结构（适合复杂场景） #

如果需要更彻底的布局分离，可以将商品区域和横幅拆分为嵌套结构，避免行高冲突：

修改后的HTML代码： #

<div class="product-container">
    <div class="product-row">
        <div class="grid-item"><!-- 商品 --></div>
        <div class="grid-item"><!-- 商品 --></div>
        <div class="grid-item"><!-- 商品 --></div>
    </div>
    <div class="banner"><!-- 横幅内容 --></div>
    <div class="product-row">
        <div class="grid-item"><!-- 商品 --></div>
        <div class="grid-item"><!-- 商品 --></div>
        <div class="grid-item"><!-- 商品 --></div>
    </div>
</div>

对应的CSS代码： #

.product-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.product-row {
    display: grid;
    gap: 2rem;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3,1fr);
}

.banner {
    /* 横幅自定义样式 */
}

优势：

通过嵌套布局彻底分离商品行和横幅，每个商品行独立控制等高，横幅完全不受商品行高影响，适合后续需要扩展复杂布局的场景。

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