加了 display: flex 还是不等高，是因为父容器缺乏高度基准，align-items: stretch 虽默认生效，但需明确高度参照（如 min-height 或 height）；子项若设 height、max-height 或 align-self 会覆盖拉伸行为，含图片时还需 img { height: 100%; object-fit: cover; } 防止尺寸干扰。
为什么加了 display: flex 还是不等高
因为父容器没给高度基准。align-items: stretch 默认生效，但“拉伸”需要参照物——如果父容器高度由内容撑开，而各列内容高度不同，浏览器就无法统一拉伸。
必须显式提供高度上下文：
-
min-height: 300px或height: 100vh（适合全屏场景） - 父容器被外部容器（如
<main>）设了height或min-height - 避免对子项写
height: 100%、max-height或flex: none，这些会覆盖 stretch 行为 - 含图片的列要加
img { height: 100%; object-fit: cover; }，否则原始尺寸破坏拉伸
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 怎么让列数自动变
这行代码是响应式多列网格的核心，但它依赖两个隐含前提：容器有明确宽度 + 子项不干扰行高计算。
常见失效原因：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
width: 100%或max-width，导致minmax()缺少计算基准 - 忘了加
box-sizing: border-box，padding/border 被算进宽度，挤垮列宽 - 子项写了
height: 100%—— 在 grid 中它常算出 0，反而让该列塌陷 - 某列内容过高时，整行被拉长，其他列跟着“被动等高”，但视觉上可能溢出；可加
grid-auto-rows: minmax(min-content, max-content)缓解
IE11 兼容时还能用 display: grid 吗
不能。IE11 的 display: -ms-grid 不支持 auto-fit、minmax() 和动态重排，语法和行为都和现代 grid 不兼容。
真实可行的降级路径：
- 用
@supports (display: grid)包裹 grid 样式，IE11 自动跳过 - 为 IE11 单独写 flex 布局：
display: flex; flex-wrap: wrap;配合媒体查询切列数 - 极简兼容方案：改用
display: table-cell，但需接受列宽固定、无法换行、语义差 - 别指望 Autoprefixer 补齐 —— 它只处理前缀，不转换语法逻辑
用 gap 还是 margin 控制列间距
无条件选 gap。它是唯一不参与子项尺寸计算、不触发外边距合并、不随子项数量变化错位的方案。
踩坑最多的地方：
- 同时写
gap: 1rem和margin: 0.5rem→ 实际间距变成 2rem，且最后一行容易右偏 - 用
margin-right+:nth-child()清除末项 → 现代布局里纯属冗余，断点一变就失效 - IE11 不支持
gap，可用grid-column-gap/grid-row-gap替代，但仅限静态列定义场景
