如何让响应式Grid卡片中第二个div拥有相同垂直起始点？

安全阿岳

2026-6-19

问题描述

我有一个包含卡片的响应式Grid布局，每张卡片包含两个垂直堆叠的div，各自内容长度不同。我需要让所有卡片中的第二个div拥有相同的垂直起始点（即使上方内容长度和第二个div自身内容长度均不同），使用justify-content: space-between无法实现，因为它只是将第二个div固定在卡片底部。

解决方案

要实现所有卡片中第二个div的垂直起始点对齐，给卡片内的第一个div设置flex-grow: 1，让它填充卡片内的剩余空间即可。

修改后的CSS代码

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 5rem;
}
.card { 
    border: 1px solid; 
    display: flex; 
    flex-direction: column; 
}
.card div:first-child {
    color: red;
    flex-grow: 1; /* 关键属性：让第一个div填充剩余垂直空间 */
}
.card div:last-child {
    color: blue;
}

对应HTML结构

<div class="grid">
    <div class="card">
        <div>First div with short content</div>
        <div>Second div with content</div>
    </div>
    <div class="card">
        <div>First div with much longer content that takes up more space</div>
        <div>Second div with content and a bit more </div>
    </div>
    <div class="card">
        <div>First div with much longer content that takes up more space and more content again and again and some more text and again</div>
        <div>Less content</div>
    </div>
</div>