未定义高度时CSS Grid基线垂直对齐在Firefox和Safari失效问题

问题背景 #

我需要实现一个Grid布局的卡片列表，要求：

• 卡片包含已知宽高比的图片和标题，标题要基线对齐
• 列数固定、行数随内容自动生成，Grid宽度继承父元素
• 仅用HTML+CSS实现

实测Chrome中表现正常，但Safari和Firefox出现对齐异常：

• Safari临时修复：把grid-template-columns: repeat(4, 1fr)改成repeat(4, calc((100% - 24px*3)/4))能正常显示
• Firefox始终异常，且测试发现：
  • 图片设固定像素高度时，Firefox/Safari均正常
  • 单元格设固定像素宽度时，Firefox正常
  • 用aspect-ratio或padding-top模拟图片容器，问题依旧
  • 单元格宽度设100%时，Firefox异常表现不变

通用兼容解决方案 #

放弃依赖align-items: baseline的基线计算，改用内部Grid布局实现标题底部对齐（视觉效果和基线对齐一致），同时兼容所有主流浏览器：

修改后的CSS代码 #

.grid {
  width: 500px;
  gap: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 恢复1fr，无需硬算间隙 */
}

/* 给卡片内部容器设置Grid布局，让图片占满垂直空间，标题固定在底部 */
.item > div {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
}

.image-like {
  background: green;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，防止图片拉伸变形 */
}

.grid+h2+.grid .image-like {
  background: orange;
}

HTML代码保持不变 #

（原HTML代码无需修改，直接使用即可）

方案原理 #

1. 原问题根源：不同浏览器对aspect-ratio元素的基线计算逻辑不一致，导致align-items: baseline失效
2. 新方案通过内部Grid将卡片分为上下两部分：
   • 图片容器占满卡片剩余垂直空间（1fr），确保所有卡片的图片区域高度一致（基于Grid单元格的高度）
   • 标题区域自适应高度（auto），并固定在卡片底部，实现视觉上的标题对齐效果
3. 恢复grid-template-columns: repeat(4, 1fr)，让Grid自动处理列宽和间隙，避免硬计算的维护成本

补充：Safari旧版本兼容（若aspect-ratio不支持） #

如果需要兼容不支持aspect-ratio的旧版Safari，可用padding-top模拟宽高比：

.image-container {
  position: relative;
  width: 100%;
  /* 宽高比=0.7 → padding-top = 100% / 0.7 ≈ 142.86% */
  padding-top: calc(100% / 0.7);
}
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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