真自适应宽度核心是grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))；auto-fit收缩空列而auto-fill保留，gap和子元素宽高须显式设置，IE11需用@supports降级flex，禁用float及写死grid-column，viewport meta标签必不可少。
真自适应宽度不是靠写死列数或百分比，而是让浏览器根据容器宽度自动决定能放几列——核心就一行：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))。
为什么用 auto-fit 而不是 auto-fill
auto-fill 会把所有可能的列都占位（哪怕内容为空），导致右侧大片留白；auto-fit 则会收缩掉空列，让剩余项拉伸填满整行，视觉上真正“贴边”。
- 写成
repeat(auto-fill, minmax(300px, 1fr)))→ 小屏下可能出现 4 列，但只填了前 2 个，后 2 列空着留白 - 写成
repeat(auto-fit, minmax(300px, 1fr)))→ 同样小屏，只显示 2 列，且各自撑满可用宽度 - minmax 的最小值（如
300px）要按实际内容调：文字卡片建议280px–320px，图片卡片可压到250px
gap 和子元素宽高必须显式处理
Grid 的 gap 不是可选装饰，它是列间间距的唯一可靠控制方式；同时，<img alt="HTML页面自适应宽度响应式布局代码" > 或 <video></video> 这类替换元素默认不响应式，必须重置。
- 漏掉
gap: 1rem→ 所有列紧贴在一起，没有呼吸感 -
<img alt="HTML页面自适应宽度响应式布局代码" >没加width: 100%; height: auto;→ 图片超出网格、撑破容器、比例失真 - 子元素写了
grid-column: 1 / -1→ 强制横跨全行，破坏自动列数逻辑，多列时会把其他项挤到下一行
IE11 兜底必须用 flex-wrap，不能靠 polyfill
IE11 对 display: grid 的支持是残缺的，任何 postcss-grid-* 类 polyfill 都无法真正模拟 auto-fit 行为。唯一可行方案是降级为 Flex 布局，并手动算间隙。
立即学习“前端免费学习笔记（深入）”；
- Flex 下列宽靠
flex-basis控制，不是minmax()；例如三列均分需写flex-basis: calc(33.333% - 0.666rem) - 减去的
0.666rem是gap: 1rem在左右两侧的均摊值（1rem ÷ 3 × 2） - 必须用
@supports not (display: grid)检测，而不是用户代理判断，否则 Chrome/Firefox 新版本也可能误入兜底逻辑
别在 Grid 容器里混用 float 或写死 grid-column
一旦用了 Grid，就放弃 float 和 table 思维；同时，任何对单个子项的列位置硬编码，都会让整个自适应逻辑失效。
-
float: left在 Grid 容器内完全无效，还可能触发怪异的层叠上下文 -
grid-column: 2 / 4这类写死定位 → 小屏时该元素直接消失（列数不够），大屏时又可能覆盖其他项 - 想突出某一项？用
order改变视觉顺序，它不影响网格自动填充逻辑
最常被忽略的是：所有这些 CSS 生效的前提，是 <meta name="viewport" content="width=device-width, initial-scale=1"> 必须存在且拼写准确——写错一个字符，整个响应式布局就在移动端彻底失效。
