HTML5语义标签header、nav、main、aside、footer明确划分后台页面功能区域，配合Grid定义外层布局（grid-template-areas）、Flex处理内部对齐，并注意主轴方向与gap替代margin。
用 header、nav、main、aside、footer 定义语义化骨架
后台页面不是一堆 div 堆出来的，而是靠 HTML5 语义标签明确划分功能区域。浏览器、屏幕阅读器和开发者都能一眼看懂结构，后续加 CSS 或 JS 也更容易定位。别用 div class="header" 这种写法——它只是视觉上像头部，但语义上什么也不是。
典型骨架结构如下：
<body>
<header></header>
<nav></nav>
<main>
<aside></aside>
<section></section>
</main>
<footer></footer>
</body>
-
header放 logo、搜索、用户操作，不放主导航（那是nav的职责） -
nav是独立导航容器，可嵌套在header内，也可单独浮动为侧边栏 -
main必须且只能出现一次，代表页面核心内容区；内部再用aside区分辅助栏（如筛选面板），用section划分功能区块（如“订单列表”“统计图表”） -
footer不只是版权信息，还可放系统状态、快捷帮助链接等轻量级全局功能
Grid 搭外层框架：用 grid-template-areas 管理区域位置
别一上来就写 display: grid + 一堆 grid-column，先用命名区域把骨架逻辑固定下来。这样改布局时只需调整一行定义，不用动每个子元素的定位。
例如一个标准后台四区布局：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
body {
display: grid;
grid-template-areas:
"header header header"
"nav main main"
"footer footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 240px 1fr 320px;
}
-
grid-template-areas中每个引号是一行，单词对应各区域的grid-area名称 -
nav和main同行但宽度不同，靠grid-template-columns控制，不是靠子元素width - 如果侧边栏要响应式隐藏，直接把
nav对应的位置设为空字符串（如" . main main"），比写媒体查询删 DOM 更干净
Flex 处理模块内对齐：警惕 justify-content 和 align-items 的方向陷阱
外层 Grid 定好格子后，每个区域内部该用 Flex——但很多人在这里翻车。比如在 header 里让 logo 左对齐、用户头像右对齐，写了 justify-content: space-between 却没生效，原因往往是：flex-direction 被改成了 column，而你还在按“水平居中”去理解 justify-content。
-
justify-content管的是主轴（main axis），align-items管的是交叉轴（cross axis）；主轴方向由flex-direction决定 - 默认
flex-direction: row→ 主轴水平 →justify-content控制左右分布 - 改成
column→ 主轴变垂直 →justify-content就变成控制上下分布了 - 真正“永远管水平”的是
text-align，但它只对内联内容有效；Flex 里没有绝对的“水平/垂直”，只有“主轴/交叉轴”
避免嵌套过深：Grid + Flex 的协作边界在哪
常见错误是：整个 main 区域用 Grid 划分三列，每列里又套一层 Grid 做卡片布局，再在卡片内部用 Flex 对齐按钮……最后样式调试像解俄罗斯套娃。
合理分工是：
- 外层
main用 Grid 控制大区块位置（如左侧菜单栏、中间数据表、右侧实时通知） - 每个区块内部用 Flex 处理自身子元素对齐（如表格标题栏的筛选控件左对齐、导出按钮右对齐）
- 卡片组件本身用 Flex 实现标题+内容+操作按钮的单向排列，别再给卡片加 Grid
- 真需要二维对齐（比如商品列表每行 4 列、自动换行、列宽自适应），才在卡片容器上用 Grid，且只用
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))这类声明式写法，不手动指定每个子项位置
最易被忽略的一点：Grid 的 grid-gap（或 gap）对子元素内外边距有覆盖效应，如果卡片内部用了 margin 又在外层 Grid 上设了 gap，会出现双倍间距。这时候应该统一用 gap，删掉所有相关 margin。
