核心是用repeat(auto-fit, minmax(250px, 1fr))实现列数自适应，避免线性媒体查询；关键断点用媒体查询重构布局结构；小屏慎用1fr，需加minmax()限制最小宽；ie11用@supports降级为flexbox。
用 grid-template-columns 配合 repeat() 动态控制列数
响应式网格的核心是让列数随屏幕宽度自动变化，而不是写死几列。grid-template-columns 的 repeat() 函数配合 minmax() 和 auto-fit 能实现“尽可能多放、不溢出”的自适应效果：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
这行代码的意思是：每个格子最小 250px，最大占满可用空间（1fr），浏览器会尽可能多地放入列，放不下就换行。它比手写多个媒体查询更简洁，也更健壮。
注意：auto-fit 会让空列收缩消失，auto-fill 则保留空位 —— 大多数场景选 auto-fit 更实用。
媒体查询只在关键断点做「大调整」，别用来微调列数
别用媒体查询去控制“375px → 1列，768px → 2列，1024px → 3列，1440px → 4列”这种线性递增。那样维护成本高，且容易漏掉中间尺寸。
立即学习“前端免费学习笔记（深入）”；
真正该用媒体查询的，是语义化布局切换，比如：
- 手机端把侧边栏隐藏或移到底部
- 平板端从单列堆叠变成主-侧双栏
- 桌面端启用三栏（内容+目录+广告）
这时只需在几个关键宽度加媒体查询，重新定义整个 grid-template-areas 或 grid-template-columns：
@media (min-width: 768px) {
.layout { grid-template-columns: 1fr 300px; }
}
@media (min-width: 1200px) {
.layout { grid-template-columns: 250px 1fr 300px; }
}
避免 fr 单位在小屏下导致内容被压缩
1fr 在窄屏里可能让文字或图片挤成一条细线，尤其当其他列用了固定宽度（如 200px）时。
解决方案是给内容列加最小宽度限制：
grid-template-columns: 200px minmax(300px, 1fr));
或者改用 minmax(min-content, 1fr) 让内容至少能完整显示自身最小尺寸。
另一个常见坑：对 grid-gap 使用百分比值 —— 它在 Grid 布局中不相对于容器宽高计算，而是按实际像素渲染，容易造成错位。统一用 rem 或 px 更可控。
兼容性兜底：IE 不支持 Grid？那就用 display: flex + flex-wrap
如果必须兼容 IE11，纯 CSS Grid 行不通。此时可采用双写策略：
- 先写 Flexbox 布局作为基础（IE11 支持）
- 再用
@supports (display: grid)覆盖 Grid 样式（现代浏览器生效）
例如：
.grid {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
这样既保功能，又不增加多余 JS 或 polyfill。
真正难的不是写出响应式 Grid，而是判断哪些地方该用自动列数、哪些地方该用媒体查询强制重构 —— 这取决于内容结构是否发生本质变化，而不是屏幕宽度本身。
