CSS Grid+Flex布局卡片标题未居顶、图片底部间隙问题求解

问题成因 #

• 标题垂直居中：.item是设置了flex-wrap: wrap的Flex容器，默认align-content属性值为stretch，会自动分配容器内的纵向空白，短标题区块上下被留白填充，看起来就像垂直居中。
• 图片底部间隙：img属于行内替换元素，默认垂直对齐规则是baseline（和文本基线对齐），会预留出对应文本下行的边距，这部分就是看起来多余的底部间隙。

调整后CSS代码（无需修改原有HTML结构） #

body{margin:0;}
.grid{display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px;}
.item{border:1px solid black; flex-wrap:wrap; display:flex; align-content: flex-start; min-height: 100%;}
.item .image{display:block;}
.item .image img{max-width:100%; height:auto; object-fit:contain; vertical-align: middle;}
.item .title{width:100%; flex-grow: 1; margin: 8px 0;}
.item .price{font-weight:bold; width:50%; align-self: flex-end;}
.item .buy{width:50%; text-align:right; align-self: flex-end;}

改动说明 #

• 给.item新增align-content: flex-start：让Flex容器内的所有行级内容全部靠顶部排列，不会自动分配纵向空白；新增min-height: 100%保证同一Grid行的所有卡片高度完全一致。
• 给.item .image img新增vertical-align: middle：直接覆盖img默认的基线对齐规则，彻底清除底部多余间隙。
• 给.item .title新增flex-grow: 1：让标题区块自动占满图片下方到价格栏之间的所有剩余纵向空间，文本自然从顶部开始展示，可根据需要调整margin值控制标题和上下元素的间距。

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