display: grid 是当前实现干净响应式布局最直接的方案，因其比 float 和 flex 更少隐性依赖、断点补丁与排查成本；核心是 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，配合 gap 与 min-height: 100vh 等细节，依托浏览器原生能力表达约束而非写死尺寸。
display: grid 是当前写出干净响应式布局最直接的路径，比 float 和 flex 更少隐性依赖、更少断点补丁、更少“为什么没生效”的排查时间。
为什么不用 float 或写死 width 百分比
浮动方案需要手动处理塌陷（clearfix）、父子 margin 合并、小屏换行逻辑；百分比宽度在嵌套多层时容易因四舍五入累计误差导致最后一栏掉行。更关键的是：这些写法无法表达“我希望它自动适应内容宽度”这一意图——浏览器得靠你算好每个 width 值，而不是帮你分配空间。
-
float: left配width: 25%在 4K 屏下可能因 sub-pixel 渲染错位，出现横向滚动条 - 嵌套容器中父级未设
box-sizing: border-box，子项padding会撑破百分比宽度 - 移动端竖屏转横屏时，
width: 25%仍强制四列，文字被压窄换行，可读性崩坏
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 怎么用
这行代码是让网格“真正响应”的核心，它告诉浏览器：“每格至少 300px 宽，但不超过均分后的空间，不够就自动少列”。不需要媒体查询，也不用预设断点值。
- 桌面端自然显示 4 列（若容器 ≥ 1200px），平板显示 2–3 列，手机显示 1 列
- 替换
300px为minmax(280px, 1fr)可适配小屏阅读舒适区（iOS 推荐最小触控宽度） - 必须配合
gap，别用margin模拟间距——gap不触发父容器溢出，且不参与网格轨道计算 - IE11 不支持
auto-fit，如需兼容，退回到@media (max-width: 768px)+grid-template-columns: 1fr
min-height: 100vh 替代 height: 100vh 的真实原因
移动端浏览器的 100vh 是按初始视口（含地址栏）计算的，滚动后地址栏收起，视口变高，但 100vh 值不会更新，导致背景被截断——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
-
min-height: 100vh保证初始铺满，又允许内容增长时不裁剪，是安全底线 - 必须同步重置
html, body { margin: 0; padding: 0; height: 100%; }，否则grid容器无法继承高度 - 视频背景需加
muted和playsinline，否则 iOS Safari 会静音且全屏播放，破坏布局流 - 伪元素全宽背景慎用
100vw：Windows 下滚动条占约 17px，直接写会导致水平溢出
真正干净的响应式，不是把所有设备尺寸列出来写死，而是用浏览器原生能力描述约束条件——minmax() 表达内容意愿，auto-fit 交给浏览器决策，gap 隔离布局与样式。最容易被忽略的是：所有这些都依赖一个干净的 HTML 结构，没有多余 wrapper，没有语义错位的 div 嵌套，否则再好的 CSS 也会被 DOM 层级拖垮。
