直接在@media规则里重写grid-template-columns是最常用可靠方式，因其不继承且不自动缩放，需显式覆盖；应移动端优先、用fr/minmax()替代固定像素，并配合媒体查询兜底控制列数与gap等属性。
媒体查询里怎么改 grid-template-columns
直接在 @media 规则里重写 grid-template-columns 是最常用也最可靠的方式。Grid 的列定义不继承，也不受父容器尺寸“自动缩放”，必须显式响应式覆盖。
常见错误是只写一次 grid-template-columns: repeat(4, 1fr) 就以为能自适应——它不会随屏幕变小而减少列数，只会把 4 列挤进窄屏，内容溢出或文字折行难看。
- 移动端优先：先写小屏（如
repeat(1, 1fr)），再用@media (min-width: 768px)增加列数 - 避免用固定像素值（如
200px）做列宽，优先用fr、minmax()或auto - 如果用
repeat(auto-fit, minmax(300px, 1fr)))，它本身就有一定响应能力，但依然建议配合媒体查询做兜底控制
为什么 minmax() + auto-fit 有时不够用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 看似智能，但它只根据**可用空间**和**单列最小宽度**计算列数，不感知设备类型、DPR、或用户缩放行为。实际项目中容易出现这些情况：
- 平板横屏（~1024px）下本该显示 3 列，却因内容撑开导致只显示 2 列
- 高 DPR 屏幕（如 MacBook Retina）下，CSS 像素与物理像素比为 2，
250px实际占位更大，列数意外减少 - 用户手动放大浏览器字体（如 125%），
minmax()不会重新评估，布局可能错乱
所以别依赖它“全自动”，把它当作辅助，关键断点仍要用媒体查询锁定列数。
立即学习“前端免费学习笔记（深入）”；
