auto-fit + minmax() 是唯一靠谱的自适应写法，因浏览器实时计算列数、最小240px防溢出、最大1fr均分空间，且自动合并空轨道；需配合gap、子项约束（如img宽100%、文本断行）及容器max-width等全链路控制。
直接用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))) 就能实现真正自适应填充，但“填满”不等于“不崩”，关键在子项是否守规矩、gap是否写对、容器是否有宽度约束。
为什么 auto-fit + minmax() 是唯一靠谱的自适应写法
浏览器会根据容器宽度，自动计算最多能塞几列，每列最小不小于 240px（防 iPhone SE 溢出），最大均分剩余空间（1fr）。它不是靠媒体查询硬切列数，而是实时响应容器尺寸变化 —— 缩放窗口、横竖屏切换、系统字体放大都能即时重排。
-
auto-fit会合并空轨道，让剩余列拉伸填满；auto-fill则保留空位，适合做预留格或九宫格视觉感 - 别写
minmax(300px, 300px)或minmax(200px, 300px)：上限固定就失去弹性，小屏下直接溢出 - IE11 完全不支持该语法，若需兼容，必须用
@supports (display: grid)包裹，并降级为flex或单列流式
gap 不是可选项，写错就导致最后一行卡片叠在一起
gap 参与 Grid 轨道计算，而 margin 不参与。用 margin 模拟间距会导致浏览器误判可用宽度，尤其在小屏下：明明只该两列，却因 margin 挤压被算成一列，或者卡片突然错位堆叠。
- 统一用像素值，如
gap: 12px；避免gap: 1rem（根字体缩放会破坏网格节奏） - Safari 15.4 之前不支持
gap在inline-grid上生效，容器必须是display: grid - 如果卡片高度不一致，默认
align-items: stretch会把短卡片拉高，加align-self: start对齐顶部更自然
子项不守规矩，整行网格就从那个点开始撕裂
Grid 只分配轨道，不管内容。一张没设 max-width: 100% 的图、一个没处理长单词的标题、一个内部用了 flex 却没写 min-width: 0 的卡片，都会撑破网格项，造成横向滚动、换行错乱或间隙抖动。
-
img必须加width: 100%; height: auto;，否则按原始宽高比渲染 - 长文本（如 URL、技术名词）加
overflow-wrap: break-word;，防止溢出容器 - 卡片内若含
display: flex容器，其子项默认min-width: auto，得显式写min-width: 0; - 外层容器建议加
max-width: 1400px; margin: 0 auto;，否则大屏下网格无限延展，文字过宽难阅读
最常被忽略的是：所有约束都得同时生效。少一个 max-width: 100%，或漏掉一个 overflow-wrap，那个卡片就是整个网格的“破窗点”。不是写对那行 repeat() 就完事了，而是每个子项都得主动退让。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
