CSS卡片布局：未知图片高度时如何实现区块顶部对齐？

需求说明 #

需要实现卡片布局，即使图片和文本高度不同，每个区块（图片区、标题区、描述区）的顶部都能和相邻卡片的对应区块对齐，要求仅用CSS实现。

补充限制：

• 不使用table方案：虽能轻松实现，但响应式场景下需重复创建元素；
• 不使用JS方案：虽可为图片容器设置最高高度的min-height，但对标题区无效，小屏场景会失效，且纯CSS方案更适配响应式。

解决方案：CSS Grid布局 #

将外层容器的flex布局改为grid布局，利用网格布局天然的同行单元格高度统一特性，完美解决对应区块顶部对齐问题，全程无需JS或重复元素，适配所有响应式场景。

修改后的完整代码 #

CSS代码

*{
    font-family: sans-serif;
}
section{
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 4vw; /* 控制卡片间距，替代原margin写法更整洁 */
    justify-content: center;
}
.product{
    background:#ececec;
    border-radius: 5px;
    padding: 2vw;
    /* 可选：让描述区自动填充剩余空间，若不需要拉伸可去掉此行 */
    display: grid;
    grid-template-rows: auto auto 1fr;
}
.product .imgContainer{
    width:15vw;
    margin:auto;
}
.product img{
    width:100%;
    display: block;
}
.product .desc, .product .title{
    width:15vw;
    margin: 2vw 0 0; /* 调整margin，利用卡片padding替代左右margin */
}

HTML代码（无需修改）

<section>
    <div class="product">
        <div class="imgContainer"><img src="https://images.pexels.com/photos/12641780/pexels-photo-12641780.jpeg?cs=srgb&dl=pexels-stayhereforu-12641780.jpg&fm=jpg"></div>
        <div class="title">Title Title Title Title Title Title Title Title Title Title Title</div>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div class="product">
        <div class="imgContainer"><img src="https://images.pexels.com/photos/12681236/pexels-photo-12681236.jpeg?cs=srgb&dl=pexels-vildan-hanne-do%C4%9Fan-12681236.jpg&fm=jpg"></div>
        <div class="title">Title</div>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>
    <div class="product">
        <div class="imgContainer"><img src="https://images.pexels.com/photos/12489081/pexels-photo-12489081.jpeg?cs=srgb&dl=pexels-josh-hild-12489081.jpg&fm=jpg"></div>
        <div class="title">Title</div>
        <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
    </div>
</section>

核心逻辑说明 #

1. 外层section用grid布局，grid-template-columns: repeat(3, auto)生成3列，每列宽度由内容自适应；gap统一控制卡片间距，避免margin的兼容性问题。
2. 每个.product内部也设为grid布局（可选），通过grid-template-rows让标题、图片区高度随内容变化，描述区自动填充剩余空间，让卡片底部对齐更规整。
3. 调整卡片padding和内部元素margin，优化布局留白的一致性。

这样修改后，无论各区块内容高度如何，同一行的对应区块都会自动顶部对齐，完全纯CSS实现，适配所有响应式场景。

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