直接用 grid + aspect-ratio 可实现真正响应、比例稳定、不抖动的卡片组：需将 aspect-ratio 加在卡片容器而非 img 上，因 img 有固有宽高比会覆盖 CSS 声明；容器设 aspect-ratio 后，内部图片用 width:100%;height:100%;object-fit:cover 填满；Grid 列推荐 repeat(auto-fit, minmax(300px, 1fr)) 配 gap:1rem；文字按钮吸底需容器 display:flex;flex-direction:column，内容区加 margin-top:auto 或 min-height:0+flex:1；老浏览器用 @supports 降级 padding-bottom 方案。
直接用 grid + aspect-ratio 就能做出真正响应、比例稳定、不抖动的卡片组，不用 JS，也不用 padding-top 黑魔法——但前提是别把 aspect-ratio 加在 <img alt="如何使用css grid构建响应式卡片组_结合aspect-ratio保持比例" > 上，得加在它的容器上。
为什么 aspect-ratio 加在 <img alt="如何使用css grid构建响应式卡片组_结合aspect-ratio保持比例" > 上没反应？
因为 <img alt="如何使用css grid构建响应式卡片组_结合aspect-ratio保持比例" > 有固有宽高比（intrinsic aspect ratio），会直接覆盖你写的 aspect-ratio 值。浏览器优先尊重图片原始尺寸逻辑，而不是 CSS 声明。
- 正确做法：给卡片容器（比如
<article class="card"></article>或<div class="card">）设 <code>aspect-ratio: 4 / 3 - 再让内部图片填满容器：
width: 100%; height: 100%; object-fit: cover; - 如果容器是 inline 元素（比如没设
display的<span></span>），先加display: block或display: flex - 别同时写
width和height—— 这会强制覆盖aspect-ratio计算 - 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) -
auto-fit会让空轨道自动收缩，空间全分给有内容的列；auto-fill则会保留空轨道，容易撑开布局 -
minmax(300px, 1fr)中的300px是卡片最小可用宽度，低于它就换行——这个值要结合字体大小和触控目标（至少 44px 高）一起看 - 必须配
gap: 1rem，别用margin模拟间距，否则网格外侧会多出空白，且受overflow: hidden影响 - 卡片容器加
display: flex; flex-direction: column; - 内容区（比如文字+按钮）加
margin-top: auto或margin-top: auto（更稳） - 确保父容器没设
align-items: stretch干扰高度计算（Grid 默认就是 stretch，所以卡片项需显式设align-self: start或用min-height打底） - 更可靠写法：
min-height: 0+flex: 1组合，防止 flex 子项继承父级 stretch 行为 - 用
@supports not (aspect-ratio: 1)包裹 padding-bottom 方案 - 父容器设
position: relative; width: 100%; padding-bottom: 75%;（对应 4:3） - 内部图片用
position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 叠加文字/按钮时，记得给父容器加
position: relative，否则绝对定位会脱标到 body - 不要指望
clamp()切换aspect-ratio值——它只接受长度单位，aspect-ratio是无单位比值，calc()也拼不出来
Grid 列数怎么设才不卡顿、不塌陷？
硬写 grid-template-columns: 1fr 1fr 1fr 看似简单，但小屏下三列挤成窄条，大屏又留白太多；而 repeat(3, 1fr) 在容器不够宽时会导致卡片宽度跌破最小可读尺寸。
卡片内文字和按钮怎么对齐到底部？
单纯靠 height: 100% 或 flex: 1 容易失效，尤其当卡片因 aspect-ratio 被拉高后，内部 flex 容器若没设高度基准，子项会按内容撑开，无法“吸底”。
立即学习“前端免费学习笔记（深入）”；
兼容老浏览器时怎么降级？
Chrome 88+/Firefox 89+/Safari 15.4+ 支持 aspect-ratio，但 iOS 15.3 及更早、旧版 Android WebView 仍需 fallback。
最容易被忽略的是：Grid 轨道尺寸（比如 grid-template-columns: 200px 200px）会完全压制子项的 aspect-ratio，哪怕你写了也没用。必须用 1fr、minmax() 或 fit-content() 留出弹性空间，比例才能真正生效。
