直接用display: grid+grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))就能同时实现等宽和等高，grid天然等高，需避免卡片内height/min-height干扰；auto-fit收缩空轨道，minmax确保最小宽且均分剩余空间。
直接用 display: grid + auto-fit + minmax() 就能稳住等宽等高，不用 JS、不靠媒体查询硬切列数，也不用给卡片设 height 或 min-height —— 这些反而会破坏拉伸逻辑。
为什么 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是关键写法
这个组合决定了列数随容器宽度自动变化，且每列宽度均等：
-
minmax(280px, 1fr)表示每列至少 280px 宽，剩余空间按比例分配（1fr） -
auto-fit会让空的网格轨道自动收缩，避免小屏下卡片被挤窄；而auto-fill会保留空轨道，导致内容少时列宽异常 - 别写死
repeat(3, 1fr)：一缩放就错乱，或在手机上强制三列造成横向滚动 - 如果容器宽度不足 280px × 2，它自然退为单列；够宽就铺开，完全响应式
align-items: stretch 失效的常见原因
它默认就生效，但容易被以下操作悄悄关掉：
- 卡片自身写了
height、min-height或max-height（删掉，或改用min-height: 0） - 卡片内部用了
margin-top: auto，但父容器不是display: flex或display: grid - Grid 容器的父级有
max-height或overflow: hidden，切断了高度传递链 - 卡片里用了
position: absolute且没在父级加position: relative，导致高度脱离文档流
卡片内部怎么让按钮沉底、图片不撑高
光靠 Grid 等高还不够，视觉一致性要靠卡片内部结构配合：
- 给卡片加
display: flex; flex-direction: column; height: 100%，确保子元素能占满高度 - 主体内容区（如
.description）设flex: 1，把剩余空间吃掉 - 底部按钮用
margin-top: auto推到底，而不是靠padding-bottom或固定height - 图片必须加
object-fit: cover或aspect-ratio: 4/3，否则加载抖动或尺寸突变会瞬间破坏等高节奏
真正卡住的往往不是 Grid 写法本身，而是某张卡片里一个没约束的 img、一段没截断的长文本、或者一个被遗忘的 min-height: 300px —— 它们不会报错，但会让整行卡片“被带歪”。用开发者工具检查每张卡片的 computed height 和 flex-basis，不一致就是线索。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
