grid 三栏等高需父容器有 grid 类且 align-items: stretch；flex 等高依赖 items-stretch（默认启用），但 flex-col 下拉伸宽度而非高度，响应式时应显式重置对齐，且列宽推荐用 minmax(0,1fr) 防溢出。
直接用 grid-cols-[240px_1fr_240px] + grid 就能实现三栏，但等高不是自动的——它取决于你用的是 Grid 还是 Flex，以及是否显式控制了对齐行为。
为什么 grid-cols-[240px_1fr_240px] 没让三栏等高
Grid 默认就等高（同一行内子项由 align-items: stretch 拉齐），但前提是：
- 父容器必须有
grid类（仅写列定义不生效） - 别在子项上加
h-full或min-h-0，否则会覆盖 stretch 行为 - 若用了
grid-auto-flow: column或手动设了grid-row，可能打乱行结构，导致“不同行”而无法等高 - 检查 DevTools 的 Computed 面板，确认
align-items确实是stretch，且没有被子项的align-self覆盖
Flex 实现三栏等高时 flex-1 是多余的
很多人给每个栏加 flex-1，结果高度还是不一致——因为 flex-1 只分配主轴（默认水平）空间，不影响交叉轴（垂直）拉伸。
- 真正起作用的是父容器的
items-stretch（Flex 默认启用，无需额外写） - 如果用了
flex-col，items-stretch会拉伸宽度而非高度，务必保持flex-row或显式写flex flex-row items-stretch - 子项若有
align-self-start、height或max-height，会直接禁用 stretch - 多行 Flex（
flex-wrap）下，每行各自等高，跨行不统一；Grid 才是整组统一等高的可靠选择
响应式切换时等高容易断掉
小屏堆叠后还留着等高痕迹，是因为 items-stretch 在 flex-col 下依然生效（拉伸宽度），但若父容器被撑开或有 min-h，视觉上仍像“等高”。
- 正确做法是显式重置：比如
sm:flex-row items-stretch md:items-start，大屏等高，小屏取消 - 或者更干脆：
sm:items-start直接覆盖默认 stretch - Grid 方案更稳：用
grid-cols-1 sm:grid-cols-[240px_1fr_240px]，小屏单列，大屏三栏，等高逻辑天然延续 - 注意 JIT 模式下方括号内空格要转下划线：
grid-cols-[240px_minmax(0,1fr)_240px]，否则类不生成
最易忽略的一点：左右栏内容少、中间栏内容长时，1fr 可能撑破容器造成横向滚动；必须用 minmax(0,1fr) 替代，否则等高布局会在视觉上“错位”或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
