grid-cols-*不能直接让卡片等高，因其仅定义列轨道，不启用grid布局；必须配合grid类触发display: grid及align-items: stretch默认拉伸行为，否则仍为块级流式布局。
为什么 grid-cols-* 不能直接让卡片等高
因为 grid-cols-* 只定义列数，不启用 Grid 布局本身——必须同时加 grid 类，否则只是普通块级流。等高依赖的是 Grid 的默认 align-items: stretch，而这个行为只在真正启用 display: grid 后生效。常见错误是只写 sm:grid-cols-3 却漏掉 grid，DevTools 里看到的 computed display 是 block，自然不等高。
Flex 实现等高卡片时 flex-1 是干扰项
flex-1 在 flex-row 下分配主轴（水平）空间，对交叉轴（垂直）高度无影响；等高靠的是默认 items-stretch，但这个行为会被以下情况破坏：
- 子项写了
align-self-start或h-full、min-h-0 - 父容器用了
flex-col（此时items-stretch拉伸的是宽度，不是高度） - 卡片内部有
max-height或固定height阻断拉伸
所以推荐用 flex flex-row items-stretch，子项不加任何高度类，让 stretch 自然生效。
响应式切换时等高逻辑断裂怎么办
小屏堆叠后还“看起来等高”，往往是因为 flex-col 下 items-stretch 仍在拉伸宽度，造成视觉错觉。正确做法是显式重置对齐方式：
- 大屏三栏：
sm:flex-row items-stretch - 小屏单列：
flex flex-col sm:items-start（取消 stretch） - 更稳妥方案：直接切 Grid，用
grid-cols-1 sm:grid-cols-3，等高逻辑天然延续，无需手动干预对齐
注意 JIT 模式下带空格的列定义要转下划线：sm:grid-cols-[240px_minmax(0,1fr)_240px]，否则类不生成。
左右栏内容少、中间栏内容长时卡片溢出
用 grid-cols-[240px_1fr_240px] 时，若中间栏内容过长，1fr 会撑破容器导致横向滚动。根本原因是 1fr 不限制最小尺寸，遇到长内容就无限扩张。必须改用 minmax(0,1fr)：
sm:grid-cols-[240px_minmax(0,1fr)_240px]
这样既保持三栏比例，又允许内容收缩避免溢出。这是最容易被忽略的细节——没加 minmax 的等高布局，在真实数据下大概率视觉错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
