嵌套CSS Grid布局出现意外间隙，如何修复实现元素对齐？

问题描述 #

构建嵌套CSS Grid布局时出现意外间隙：

• 布局目标：每行展示3张卡片，卡片的子元素（橙色header、灰色content、黑色footer）需在同一行对齐
• 问题：预期每行高度由单元格内容决定，但实际高度远大于内容，出现多余空白。

原代码如下：

原CSS代码 #

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

.card {
    display: grid;
    grid-row-gap: 10px;
    grid-auto-rows: 1fr;
}

.header {
    background-color: orange;
}

.content {
    background-color: grey;
}

.footer {
    background-color: black;
    color: white;
}

原HTML代码 #

<div class="cards">
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="card">
        <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class="content">
            <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
        </div>
        <div class="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

问题原因 #

.card中的grid-auto-rows: 1fr是核心问题：这个属性会强制卡片内的每一行（header、content、footer）均分卡片的可用高度，哪怕内容不需要这么多空间，直接导致了多余的空白间隙。同时外层Grid的行高由该行最高卡片决定，进一步放大了空白区域。

修复方案 #

方案1：消除间隙（不强制子元素跨列对齐） #

如果不需要同列的header/content/footer严格对齐，只需要移除.card中的grid-auto-rows: 1fr，让卡片子元素高度由自身内容决定：

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* 合并row-gap和column-gap为gap，更简洁 */
}

.card {
    display: grid;
    gap: 10px;
    /* 移除grid-auto-rows: 1fr */
}

.header {
    background-color: orange;
}

.content {
    background-color: grey;
}

.footer {
    background-color: black;
    color: white;
}

方案2：消除间隙+保持子元素跨列对齐 #

如果需要同列的header、content、footer严格在同一水平线，不能用嵌套Grid，要改成单层Grid布局，将所有子元素直接作为外层Grid的项目，通过网格线定位：

修改后的CSS

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content; /* 行高由内容最小高度决定 */
    gap: 10px;
}

.header {
    background-color: orange;
    grid-column: span 1; /* 占1列 */
}

.content {
    background-color: grey;
    grid-column: span 1;
}

.footer {
    background-color: black;
    color: white;
    grid-column: span 1;
}

修改后的HTML

<div class="cards">
    <!-- 第一行卡片1 -->
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
        <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
    </div>
    <div class="footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <!-- 第一行卡片2 -->
    <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    <div class="content">
        <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
    </div>
    <div class="footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <!-- 第一行卡片3 -->
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
        <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
    </div>
    <div class="footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <!-- 第二行卡片1 -->
    <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    <div class="content">
        <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
    </div>
    <div class="footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <!-- 第二行卡片2 -->
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
        <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
    </div>
    <div class="footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

这种布局下，每一列的header会自动对齐，行高由该行最高的header/content/footer决定，不会产生多余空白。

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