核心是清理浮动遗留样式与DOM结构并重构为单层Grid布局：删除所有float/clear/overflow相关声明，用grid-template-areas和auto-fit+minmax实现响应式，子容器须显式声明display: grid，避免冗余嵌套。
直接用 display: grid 替代浮动嵌套，核心不是“加个 grid 就完事”，而是必须同步清理浮动时代遗留的样式债和 DOM 结构——否则浏览器仍在解析 float、clear、overflow: hidden 这些规则，布局树照样臃肿。
删掉所有浮动相关声明，连带 clearfix 都得清干净
浮动布局常靠 clearfix 类或 overflow: hidden 补救塌陷，这些在 Grid 容器里全是冗余。它们仍会进入 CSSOM 计算流程，哪怕没生效也拖慢样式匹配。
- 删掉所有
float: left/float: right声明 - 移除所有
clear: both、clear: left等清除逻辑 - 去掉父容器上为包裹浮动而加的
overflow: hidden或::after { content: ""; display: table; clear: both; } - 检查 DevTools 的 Computed 面板，确认没有残留的
float计算值
用单层容器 + grid-template-areas 替代多层 wrapper
常见错误是把 header、sidebar、main、footer 拆成四层嵌套 div，只为对齐某块内容。Grid 允许直系子元素通过命名区域定位，DOM 层级压到一层即可。
- 外层容器设
display: grid和grid-template-areas，例如："header header" "sidebar main" "footer footer" - 子元素直接加
grid-area: header、grid-area: main等，不包任何中间 wrapper - 避免为“让按钮右上角”再套一层
div，改用justify-self: end; align-self: start - 表单中
label和input不必拆成两行 div，用grid-template-columns: [label] 120px [input] 1fr+grid-column: label直接控制
响应式列数交给 auto-fit + minmax()，别写 media query
浮动方案里每个断点都要重算 width、margin、box-sizing，而 Grid 可用一行声明自动适配：
立即学习“前端免费学习笔记（深入）”；
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); gap: 1rem;
-
minmax(300px, 1fr)表示每列最小 300px，超出后均分剩余空间 -
auto-fit会让空轨道收缩，适合响应式；auto-fill则保留空轨道，适合固定列数场景 - 完全不用
@media，浏览器实时按容器宽度计算列数，布局树增量更新即可 - 子项别再设
width: 100%，Grid 列宽由容器控制，设了反而容易溢出
嵌套 Grid 必须每层显式声明 display: grid
90% 的错位问题出在这里：外层是 Grid，但子容器（比如 .card）没加 display: grid，导致 grid-column 等属性完全失效。
- 选中该元素，在 DevTools 的 Computed 面板确认
display值是否为grid或inline-grid - 子容器即使只有一列，也要写
display: grid; grid-template-columns: 1fr - 别指望
grid-template-areas名字穿透到孙子级，它只作用于直系子元素 - 三层以上嵌套（如 Grid → Grid → Grid）在 Chrome Layers 面板里会看到多个重叠的 “Grid Overlay”，滚动卡顿明显，建议最内层改用
display: flex
真正难的不是写 Grid 语法，而是识别哪些 DOM 节点和 CSS 规则已经变成“无用但仍在计算”的负担——它们藏在旧 class 里、注释掉的样式里、甚至 JS 动态插入的 style 标签中。迁移时花 20 分钟 audit 这些残留，比调三天 layout 错位更省时间。
