流式Grid核心是repeat(auto-fit, minmax(250px, 1fr))，列数随容器动态变化；媒体查询仅覆盖grid-template-columns；gap用rem单位或媒体查询降级；IE兼容推荐@supports降级为Flexbox。
grid-template-columns 怎么写才能自动适应容器宽度
流式布局的核心是让列数随容器缩放动态变化，不是靠固定列宽硬撑。关键在用 repeat() 搭配 minmax() 和 auto-fit（不是 auto-fill）。
常见错误是写成 repeat(3, 1fr)——这永远只铺 3 列，缩到手机上直接横向滚动；或者用 fit-content() 套死宽度，失去流式意义。
-
repeat(auto-fit, minmax(250px, 1fr))：最小每列 250px，空间够就均分，不够就收缩，列数自动减少 -
repeat(auto-fill, minmax(250px, 1fr))：会留空列，适合需要对齐栅格线的场景（比如卡片高度不一需底部对齐） - 别用
fr和像素混搭，比如1fr 200px 1fr，这会让流式逻辑失效
媒体查询该不该写？写了怎么不和 grid 冲突
媒体查询不是必须，但它是兜底手段：当 auto-fit 在极端小屏下仍撑不开合理列宽时，就得手动干预。重点是媒体查询只改 grid-template-columns，其他 grid 属性（如 gap、justify-items）尽量保持不变。
容易踩的坑是媒体查询里重写整套 grid，比如加了 grid-auto-flow: column 或改 grid-row，结果破坏原有流向逻辑。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：只在断点处覆盖
grid-template-columns，例如@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } } - 别在媒体查询里改
grid-column或grid-row的显式定位，否则响应式行为不可预测 - 如果用了
grid-template-areas，媒体查询中必须重写整个grid-template-areas，不能只改列数
gap 设置多少才不会在小屏上挤出滚动条
gap 是固定值，缩放时不会自适应，所以大 gap 在窄屏下极易触发横向溢出。解决思路不是去掉 gap，而是用相对单位或媒体查询降级。
典型错误是设 gap: 2rem，在 iPhone SE 宽度下，2rem ≈ 32px，两列间 gap 就占掉 64px，再减去内容宽度，很容易超限。
- 优先用
gap: 1rem或gap: 0.5rem，比像素更可控 - 更稳妥：用媒体查询逐步缩小 gap，例如
@media (max-width: 768px) { .grid { gap: 0.75rem; } } - 绝对不要用
gap: 5vw这类视口单位——它会在大屏上把间隙拉得过大，视觉失衡
IE 兼容性问题怎么绕开又不增加维护成本
CSS Grid 在 IE10/11 中支持的是旧语法（display: -ms-grid），且不支持 auto-fit、minmax() 等现代特性。强行兼容会大幅增加 CSS 体积和维护难度。
真实项目里，除非明确要求支持 IE，否则直接放弃。但若必须支持，别写两套 grid，改用 Flexbox 降级方案更轻量、更可控。
- 用
@supports not (display: grid)包裹降级样式，避免被新浏览器误读 - Flexbox 降级示例：
display: flex; flex-wrap: wrap;配合flex-basis: calc(33.333% - 1rem)模拟三列 - 别试图用 Autoprefixer 自动加
-ms-前缀——它对 Grid 旧语法支持极差，生成的代码常出错
流式 Grid 的复杂点不在写法，而在「什么时候该信 auto-fit，什么时候该切回媒体查询」。这个边界没标准答案，得看内容密度和最小可读宽度——比如文字卡片不能小于 280px 宽，那你的 minmax() 下限就得卡在这儿，而不是拍脑袋定 250px。
