用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现列数自适应，配合 rem/em 的 grid-gap、minmax() 的 grid-auto-rows 及必要时的媒体查询重定义 grid-template-areas，可高效构建健壮响应式网格。
直接用 grid-template-columns 配合 minmax() 和 auto-fit 就能搞定多数响应式网格，不需要为每个断点手写媒体查询。
用 repeat() + minmax() 替代固定列数
硬写 grid-template-columns: 1fr 1fr 1fr 1fr 会导致小屏上内容挤成一条缝。真正灵活的做法是让浏览器自动计算能放几列：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 每列最小 300px，最大均分剩余空间，列数随容器宽度自动增减 -
auto-fit会折叠空列，auto-fill则保留空占位，通常选auto-fit - 300px 是常见移动端卡片最小宽度，可按实际内容调整（如图文卡片建议 ≥280px，纯图标可压到 200px）
媒体查询只用于大范围结构调整
别一上来就堆 @media (max-width: 768px)。Grid 的响应能力足够强，媒体查询应留给真正需要“换骨架”的场景：
- 桌面端用三栏主-侧-侧布局 → 平板端改为两栏 → 手机端强制单栏：这时才在
768px和480px加断点 - 改的不是列宽，而是整个
grid-template-areas或grid-template-columns结构 - 避免在
400px、450px、500px连续设断点——人眼根本看不出区别，反而增加维护成本
grid-gap 要用相对单位，别锁死像素值
写 grid-gap: 20px 在高 DPI 屏幕或缩放 125% 时会显得过疏。正确做法：
立即学习“前端免费学习笔记（深入）”；
- 优先用
rem（如grid-gap: 1.5rem），跟随根字体大小缩放 - 或用
em（基于父元素字号），适合嵌套较深的组件 - 绝对禁止在移动端用
px值控制间隙，iOS Safari 对px缩放不一致，容易导致错位
注意 grid-auto-rows 对动态内容的影响
当网格项高度不固定（比如文字长度差异大），仅靠 grid-template-rows 无法覆盖所有情况：
- 必须加
grid-auto-rows: minmax(100px, auto)，否则新行高度可能塌陷为 0 -
minmax(100px, auto)表示每行至少 100px，内容多时自动撑开 - 若用
grid-auto-rows: 1fr，所有自动行会被等分，导致短内容项被强行拉高，破坏视觉节奏
最易被忽略的是 grid-template-areas 在小屏下的 fallback 处理——它不会自动重排，一旦某区域宽度不够，整行布局就会崩。真要保底，得在媒体查询里重定义整个 grid-template-areas，而不是指望 Grid 自己“聪明”地绕过去。
