优先使用 fr 单位而非百分比，fr 按剩余空间分配、天然适配 Grid 弹性需求；响应式列数变化应依靠 repeat(auto-fit, minmax(min, 1fr)) 实现，无需多断点。
grid-template-columns 用百分比还是 fr 单位？
响应式 Grid 排列的核心不是“写多少断点”，而是 grid-template-columns 的单位选择是否匹配内容弹性需求。百分比（%）在嵌套容器或有 padding/margin 时容易错位，fr 单位才是 Grid 布局的天然搭档——它按剩余可用空间分配，不依赖父容器精确宽度。
常见错误现象：grid-template-columns: 25% 25% 25% 25% 在小屏下子项被强制压缩、文字换行混乱，甚至触发横向滚动条。
- 纯等宽卡片布局：优先用
repeat(4, 1fr)，再配合minmax()控制最小宽度 - 需要固定侧边栏 + 自适应主区：用
200px 1fr或250px minmax(300px, 1fr) - 避免混用
px和%，比如200px 50%—— Grid 会按规则重新计算，结果不可控
如何让列数随屏幕变化而不写多个 media query？
靠 grid-template-columns 配合 minmax() 和 auto-fit/auto-fill，就能一条声明搞定多断点效果，根本不用手动写 @media。
使用场景：商品列表、图标导航、文章摘要卡片等“数量不确定、尺寸需自适应”的布局。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) -
auto-fit会合并空轨道，auto-fill则保留空轨道（影响对齐行为） - 注意
minmax(300px, 1fr)中的300px是最小宽度，不是断点阈值——实际列数由容器宽度 ÷ 300px 决定 - 如果卡片有固定 aspect-ratio 或字体缩放需求，需额外加
grid-auto-rows: minmax(200px, auto)
移动端列数太少、间隙太大？别只调 gap
gap 是全局生效的，调小它可能让桌面端显得拥挤；真正影响移动端“列太少”的，往往是 minmax() 的最小值设高了，或者容器本身有未重置的 padding。
常见错误现象：手机上只显示一列，但明明写了 repeat(auto-fit, minmax(200px, 1fr)) —— 实际是父容器 padding: 2rem 吃掉了可用宽度，导致单列宽度不足 200px。
- 先检查父容器：用浏览器开发者工具看
computed width是否被 padding/border 挤压 - 把
minmax()下限适当降低，比如从300px改成220px，再配合font-size: clamp(0.875rem, 4vw, 1rem)控制文字大小 - 如果必须保留大间隙，改用
justify-content: center居中排列单列，而非强行撑满
IE 不支持 fr 和 auto-fit？那就别硬上 Grid 响应式
IE10/11 对 Grid 的支持仅限于旧语法（display: -ms-grid），fr、minmax()、auto-fit 全都不认。强行加前缀或降级写法，大概率导致布局错乱或白屏。
性能与兼容性影响：现代 Grid 布局在 Chrome/Firefox/Safari 中渲染高效，但 IE 下 fallback 方案往往要叠加 Flexbox + JS 计算列数，反而更慢、更难维护。
- 确认项目真实兼容需求：如果统计数据显示 IE 使用率
- 若必须兼容，用
@supports (display: grid)包裹 Grid 样式，外层用 Flexbox 降级 - 不要试图用
postcss-cssnext或类似插件“自动转译” fr 单位——它不会生成可用的 IE 替代逻辑
最常被忽略的一点：Grid 响应式真正的复杂度不在代码行数，而在“内容尺寸波动”和“视口缩放行为”的耦合。比如用户双指缩放页面时，minmax(300px, 1fr) 的 300px 是 CSS 像素，不是设备独立像素，实际表现可能和预期不一致。
