Grid是唯一能同时约束行和列的布局模型，适合页眉+侧边栏+主内容区+页脚结构；外层用grid-template-areas定义区域，主内容区内按需用Flexbox或嵌套Grid；表格与表单须平级并通过form属性关联；模块需有明确容器边界与通信契约；响应式断点应基于内容而非设备尺寸。
用 Grid 划分宏观区域，别一开始就套 Flexbox
Grid 是唯一能同时约束行和列的布局模型，适合后台这种“页眉 + 侧边栏 + 主内容区 + 页脚”结构明确的页面。Flexbox 在一维对齐上很稳，但强行用它堆多行多列，容易出现高度不一致、换行错位、响应式断点失效等问题。
常见错误现象：display: flex 套多层 flex-direction: column 后，某个模块内容变长，整个右侧栏被顶出视口；或者媒体查询里改了 flex-wrap，但子项宽度没同步收缩，导致横向溢出。
- 外层容器设
display: grid，用grid-template-areas定义命名区域，比如"header header header" "sidebar main main" "footer footer footer" - 每个区域对应一个语义化标签（
<header>、<aside>、<main>），避免用<div class="sidebar">这类无意义包裹 - 主内容区（
<main>）内部再用 Flexbox 或嵌套 Grid，按需处理表单、表格、卡片等子模块
表格与表单共存时，别把 <form> 直接塞进 <table>
HTML 规范禁止在 <table> 内部直接嵌套 <form> —— 浏览器会自动闭合 <form>，导致 DOM 结构断裂，JS 获取不到预期的表单元素。这不是兼容性问题，是解析规则本身。
正确做法是让 <form> 和 <table> 平级，通过 form 属性关联控件。例如某行的编辑按钮触发该行数据提交，就把这一行里的所有 <input> 加上 form="edit-form"，而 <form id="edit-form"> 放在表格外面。
立即学习“前端免费学习笔记（深入）”；
- 内联编辑场景：每行末尾放一个
<button type="submit" form="inline-form">，所有可编辑单元格的<input>都带form="inline-form" - 主从模式：表格点击某行后，用 JS 把该行
data-id填入右侧<form>的隐藏字段，不依赖 DOM 嵌套关系 - 筛选工具栏：顶部搜索表单独立存在，提交后 JS 读取值、发请求、重绘下方
<table>，两者完全解耦
多模块组合必须有明确的“容器边界”和“通信契约”
后台页面常把用户管理、日志列表、统计图表塞进同一页面，但没做隔离就容易互相污染：比如一个模块的 CSS margin: 0 auto 影响了另一个模块的居中逻辑；或某个模块的全局事件监听器（如 document.addEventListener('click', ...)）误触其他模块行为。
性能影响更隐蔽：没有边界意味着无法对模块做独立的 contain: layout style paint，浏览器重排重绘范围扩大，滚动卡顿明显。
- 每个模块用独立的
<section>包裹，并加唯一id或data-module属性 - 模块内样式用 BEM 类名（如
user-list__item），避免使用通配符或层级过深的选择器 - 模块间通信只走明确接口：比如通过自定义事件（
dispatchEvent(new CustomEvent('user-selected', { detail: { id: 123 } }))），而不是直接操作对方 DOM
响应式断点不是“写死 px”，而是“按内容撑开”
很多后台模板把断点设成 @media (max-width: 768px)，结果在 iPad Pro（分辨率 2048×2732）上反而触发移动端样式——因为它的 viewport 宽度是 1024px，刚好卡在临界点。这说明断点不该基于设备，而应基于内容是否还能舒适阅读。
真正要观察的是模块内部：表格列数太多时要不要折叠；表单标签和输入框能否并排显示；侧边栏图标是否挤成一行。
- 优先用
min-width而非max-width，比如@media (min-width: 1200px)表示“当屏幕够宽、能放下三列时才启用三列布局” - 对表格用
overflow-x: auto包一层<div>，比强制隐藏列或缩写字体更可靠 - 侧边栏收起逻辑不要只靠媒体查询，加 JS 监听
resize时检查document.body.clientWidth，动态切换collapsed类
最易被忽略的一点：Grid 的 fr 单位在嵌套时会逐层缩放，如果外层用 1fr 3fr，内层又用 1fr 1fr，第二层的两个 1fr 实际占比并不相等。调试时得打开浏览器开发者工具，看 computed 值里的 grid-template-columns 真实展开结果，不能只信代码写的字面意思。
