auto-fit 配合 minmax() 实现列数自适应，需避免误用 auto-fill、硬编码线号及混用 fr/vw 单位；@media 应聚焦结构切换而非重复控制列数。
grid-template-columns 配合 minmax() 和 auto-fit 实现列数自适应
纯 CSS 网格实现“根据容器宽度自动调整列数”，关键不是写死 grid-template-columns: repeat(3, 1fr)，而是用函数组合让浏览器动态计算。核心是 minmax() 定义单列最小/最大尺寸，再配合 auto-fit（不是 auto-fill）触发收缩归并。
常见错误是用 auto-fill 导致空轨道残留，或把 minmax(300px, 1fr) 写成 minmax(300px, auto)——后者会让列宽失去弹性约束，破坏等分布局。
-
minmax(250px, 1fr)表示每列至少 250px，剩余空间均分 -
auto-fit会在无法填满时折叠空轨道，真正实现“列数随宽变化” - 必须搭配
grid-auto-flow: column才能保证内容按列优先填充（默认是行优先）
article {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
@media 查询与 grid 布局的协作边界在哪
CSS Grid 本身已具备强响应能力，@media 不该用来重复控制列数，而应聚焦于布局结构级切换：比如从三栏卡片流 → 单栏图文混排 → 移动端堆叠导航。滥用媒体查询覆盖 grid-template-columns 会增加维护成本，且容易和 auto-fit 逻辑冲突。
典型误用：@media (max-width: 768px) { grid-template-columns: 1fr; } —— 这段其实已被上面的 minmax(280px, 1fr) 自动覆盖，无需手动写。
立即学习“前端免费学习笔记（深入）”；
- 用
@media调整gap、padding或整体容器max-width - 切换
grid-template-areas重构区域语义（如 desktop: "header main sidebar" → mobile: "header main"） - 隐藏/显示特定
grid-area（如移动端收起侧边筛选栏）
grid-column-end / grid-row-start 在响应式中容易被忽略的定位陷阱
当使用命名线（如 grid-column: sidebar-start / sidebar-end）或跨区（grid-column: 1 / -1）时，响应式下容器列数变化会导致线名失效或跨区越界。尤其在 auto-fit 动态生成轨道时，-1 指向的是当前实际存在的最后一根线，而非初始定义的末尾。
错误现象：桌面端正常跨两列的卡片，在小屏变成单列后突然撑满全宽甚至溢出。
- 避免硬编码
grid-column: 1 / 4类似写法，改用span 2或命名区域 - 用
grid-column: span 2比grid-column: 2 / 4更安全，它不依赖绝对线号 - 若需精确控制，优先定义
grid-template-areas，再用grid-area: header绑定元素
fr 单位与视口单位（vw/vh）混用引发的缩放错乱
fr 是网格内相对单位，基于剩余可用空间；vw 是视口单位，基于整个屏幕宽度。两者混用（如 grid-template-columns: 1fr 30vw 1fr）在缩放页面或切换设备方向时，会因计算时机不同步导致列宽跳变，尤其在 Safari 中表现明显。
真实场景：用户双击缩放网页后，中间一列突然变窄，左右两列挤压内容。
- 保持单位统一：全用
fr+minmax()，或全用rem/%配合@media - 若必须引入视口逻辑（如 banner 图全宽），用
width: 100vw单独作用于子元素，而非塞进grid-template-columns - 测试时务必在 iOS Safari 和 Chrome Android 下拖动窗口边缘，观察是否出现列宽重绘延迟
auto-fit 和 auto-fill 当成同义词换着用，以及在命名线还没定义清楚时就写 grid-column: sidebar-start——这两处一旦出错，浏览器不会报错，但布局会静默崩坏。 
