aspect-ratio 必须写在卡片容器上而非 img 上，因 img 的固有宽高比优先级最高，会覆盖 aspect-ratio；卡片容器需设 display: block/flex、不写 width/height、有宽度上下文，才能使 aspect-ratio 正确推导高度。
直接用 aspect-ratio + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 就能稳定实现，无需 JS、不用 padding-bottom 黑魔法，但必须加在卡片容器上，不能加在 <img> 上。
为什么 aspect-ratio 必须写在卡片容器而非 img 上
浏览器对 <img> 的固有宽高比（intrinsic aspect ratio）有最高优先级，会直接覆盖你写的 aspect-ratio 声明。哪怕写了 aspect-ratio: 4 / 3，只要图片本身是 16:9，它就按 16:9 渲染。
- 正确做法：给
<div class="card">加aspect-ratio: 4 / 3，再让内部<img>填满：width: 100%; height: 100%; object-fit: cover; - 如果卡片是 inline 元素（比如没设
display），先加display: block或display: flex，否则aspect-ratio不生效 - 别同时写
width和height—— 这会强制覆盖aspect-ratio计算逻辑
Grid 列数设置不塌陷、不滚动的关键参数
硬写 repeat(3, 1fr) 或 1fr 1fr 1fr 在小屏下必然出问题：要么列宽跌破可读阈值，要么触发横向滚动。真正可靠的写法只有一条：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))-
auto-fit会收缩空轨道，让有内容的卡片拉伸填满整行；auto-fill则保留空位，小屏下右侧留白甚至滚动 -
minmax(300px, 1fr)中的300px是底线——低于它就换行，这个值要结合字体大小（至少 1rem）、触控目标（最小 44px 高）综合判断 - 必须配
gap: 1rem，别用margin模拟间距，否则网格外侧多出空白，且受overflow: hidden影响
卡片内部内容吸底且不撑高的实操组合
等比例卡片一旦拉高，文字少的卡片底部按钮容易“上浮”，这不是高度不一致，而是视觉锚点错位。靠 height: 100% + flex: 1 容易失效，尤其当父容器高度由 aspect-ratio 推导而来时。
立即学习“前端免费学习笔记（深入）”；
- 卡片容器加
display: flex; flex-direction: column; - 内容区（标题+描述）不设高度，按钮加
margin-top: auto，自动吸附到底部 - 确保卡片没写
height、max-height或min-height，这些会阻断aspect-ratio的高度推导 - 若卡片内有长文本（如 URL），加
min-width: 0防止撑破网格
最容易被忽略的是：卡片容器必须有明确的高度上下文才能让 aspect-ratio 生效——它不是凭空生成高度，而是基于宽度计算出高度。如果父容器是 display: flex 且没设 flex: 1 或 width: 100%，或者卡片被包裹在未设宽高的 <div> 里，aspect-ratio 就会静默失效，最终渲染高度为 0。
