Grid 多列默认等高需确保 align-items: stretch（默认值），排除子项 height/max-height/min-height 干扰及内容溢出影响，统一 padding/margin/box-sizing 并规范图片和文字样式。
Grid 多列布局默认就能等高，关键在于确保 align-items 设置为 stretch（这也是 Grid 的默认值），同时排除干扰高度的其他样式。
确认容器开启了 grid 布局且未覆盖 align-items
如果子项高度不一致，先检查父容器是否真正启用了 Grid，并确认没有意外设置 align-items: flex-start、align-items: center 等值覆盖了默认拉伸行为。
- 确保父元素有
display: grid或display: inline-grid - 检查是否写了
align-items: start、align-items: center等 —— 删除或显式重置为align-items: stretch - 注意：CSS 重置库（如 normalize.css）或某些 UI 框架可能全局修改过
align-items，建议在开发者工具中查看计算值
避免子项自身限制高度
即使 align-items: stretch 生效，若子项设置了 height、max-height、min-height，或内部内容触发了 overflow: hidden，也可能阻止拉伸。
- 移除子项上的
height、max-height（除非你明确需要截断） - 检查子项是否设置了
min-height: auto或min-height: 0—— 这会禁用 stretch 行为，应改为min-height: unset或删掉 - 子项内若有绝对定位元素或浮动，不影响 stretch；但若使用了
display: flex且未设align-items: stretch，其内部子项可能不等高 —— 这属于嵌套问题，与外层 Grid 无关
处理内容溢出导致视觉“不等高”
有时所有列实际高度一致，但文字换行、图片尺寸、padding 差异让视觉上显得参差。这时不是 Grid 失效，而是内容渲染差异。
立即学习“前端免费学习笔记（深入）”；
- 统一子项的
padding、margin和box-sizing（推荐box-sizing: border-box） - 对文字区域加
overflow: hidden+text-overflow: ellipsis（配合white-space: nowrap或多行省略方案）可控制高度一致性 - 图片建议设置
height: 100%+object-fit: cover，避免撑开容器
需要“最小等高”而非“强制等高”时的替代思路
如果业务上只需各列至少和最高列一样高（比如卡片底部按钮对齐），但允许内容更多时继续撑高，那 align-items: stretch 本身已满足；若想严格锁定所有列高度为最高项的高度（禁止撑高），Grid 本身不直接支持，需借助 JS 或改用 grid-template-rows: 1fr 配合固定行数 —— 但会牺牲内容自适应性，通常不推荐。
- 纯 CSS 场景下，
align-items: stretch+ 正确的子项样式 = 自动等高 - 不要用
height: 100%强制子项填满 —— 它依赖父容器有明确高度，而 Grid 的 stretch 不依赖此 - 调试技巧：在开发者工具中临时给子项加
outline: 1px solid red，直观观察是否真不等高
