CSS Grid本身不响应，需用@media重定义结构；单列需显式写grid-template-columns: 1fr，卡片布局错位主因是内容未约束（如图片缺max-width: 100%、文字未换行），非repeat()错误。
Grid 布局本身不响应，所谓“响应式网格”是靠 @media 主动重定义结构，不是加个 repeat() 就自动适配。
grid-template-columns 怎么写才不卡死在单列
只写 display: grid 不会生成多列——浏览器默认就是 1 列、行高由内容撑开，所有子项堆在左上角。真正起作用的是显式声明轨道：
-
grid-template-columns定义垂直方向的列线（如repeat(3, 1fr)或240px 1fr 320px） -
grid-template-rows定义水平方向的行线（如auto 1fr auto），漏写会导致高度失控 - 移动端优先建议先写单列：
grid-template-columns: 1fr，再用媒体查询覆盖 - 别混用
fr和auto，比如1fr auto会让auto项吃掉全部剩余空间
repeat(auto-fit, minmax()) 卡片布局为什么在小屏错位
常见现象：iPhone 上卡片挤成窄条、文字溢出、图片撑破容器。这不是 repeat() 写错了，而是内容没守规矩：
-
minmax(240px, 1fr)中的240px是下限，若容器宽< 240px × 列数，浏览器只能压缩内容而非换行 - 必须配合
gap使用，不能靠margin模拟间距，否则轨道计算失准 - 图片必须加
max-width: 100%; height: auto;，否则原始尺寸顶开网格项 - 长单词（如 URL）要加
overflow-wrap: break-word;，否则横向溢出
grid-template-areas 在不同屏幕下怎么不崩
grid-template-areas 是静态快照，不会随屏幕变化自动重排。小屏硬套三栏模板，结果就是横向滚动或元素叠压：
立即学习“前端免费学习笔记（深入）”；
- 必须为每个断点单独写完整声明，例如：
@media (max-width: 768px) { .layout { grid-template-areas: "header" "nav" "main" "footer"; } } - 每行字符串列数必须一致，缺位用
"."占位，否则整条规则被静默丢弃 -
grid-area的值（如"header"）大小写、引号、空格必须完全一致，拼错一个字符就失效 - 同时写了
grid-area和grid-column，后者会覆盖前者，区域模板对该元素不起作用
gap 和 box-sizing 不配对时最常踩的坑
gap 看似只是加间距，但它参与轨道宽度计算。没控住 box-sizing，padding 和 border 就会偷偷吃掉列宽余量：
- 网格容器必须设
box-sizing: border-box，否则minmax()实际可用空间缩水 -
gap: 12px是手机端安全值；避免用gap: 1rem，根字体缩放会破坏网格节奏 - Safari 15.4 之前不支持
gap在inline-grid上生效，容器必须是display: grid - IE 完全不支持
gap，需降级用grid-column-gap+grid-row-gap
真正难的从来不是写出那行 repeat(auto-fit, minmax())，而是确保每张图都加了 max-width: 100%、每个标题都处理了换行、每个容器都设了 box-sizing: border-box——漏掉任意一个，网格的“无缝感”就从那个点开始撕裂。
