css grid 实现复杂页头需在 header 容器设 display: grid 和 grid-template-areas（带引号多行声明），子元素 grid-area 值须严格匹配；响应式需重写 entire areas；吸顶用 position: sticky 于子行而非整个 header；box-sizing: border-box 必须统一。
复杂页头（header）排版不是靠 float 或一堆 margin 堆出来的，而是用 CSS Grid 的二维控制能力，把 logo、导航、搜索框、用户操作区这些模块按语义划分区域，再精准落位。
grid-template-areas 必须写在 header 容器上
很多人把 grid-area 写在子元素上就以为布局成了——其实没用。真正起作用的是父容器的 grid-template-areas 声明。
- 页头容器必须设
display: grid，否则所有网格属性都无效 -
grid-template-areas要用引号包裹，每行一组，空格分隔列，例如："logo nav actions"表示单行三列 - 子元素的
grid-area值必须和引号里的词完全一致（大小写、连字符、空格数都不能错） - 用点（
.）占位表示留空，比如"logo . actions"让导航区域“消失”而不影响结构
多行页头用 grid-row 和 grid-column 精控跨区
当页头需要两行结构（比如上层 logo + 下层导航），grid-template-areas 一行写不下，就得拆成多行声明，并配合 grid-row/grid-column 控制跨区。
- 例如两行页头：
grid-template-areas: "logo logo logo" "nav search actions" - 让 logo 跨三列：子元素加
grid-column: 1 / -1（从第1列线到最后一列线） - 让搜索框横跨中间两列：用
grid-column: 2 / 4，比写死grid-area: search更灵活 - 避免对齐错位：所有子元素必须有明确的
grid-row或grid-area，漏一个就会塌陷出空白
响应式页头重排时，每个断点都要完整定义 areas
媒体查询里只改 grid-template-columns 是不够的，grid-template-areas 必须整套重写，否则小屏下布局会残留桌面端结构。
- 移动端常需堆叠：把
"logo nav actions"改成"logo" "nav" "actions"，并设grid-template-columns: 1fr - 别指望浏览器自动“折叠”区域——没出现在当前
grid-template-areas里的子元素，会脱离网格流，可能错位或溢出 - 如果用了
gap，记得在断点里也统一设置，否则小屏间距可能突变 - IE 不支持
grid-template-areas，如需兼容，得降级为display: flex+flex-wrap，但语义性和跨区能力会大幅下降
冻结/吸顶页头要配 overflow-y: auto 和 position: sticky
页头本身不需要 position: fixed；真正要冻结的是它内部的某一行（比如二级导航栏），且必须满足滚动容器约束。
- 给页头容器加
overflow-y: auto（或设固定高+滚动），position: sticky才能生效 - 想让二级导航栏吸顶：给那行子元素加
position: sticky; top: 0;，不是给整个header加 - 多个吸顶层（如 logo 行 + 导航行）要分别设不同
top值，例如top: 0和top: 64px - 打印 PDF 或服务端渲染时，
sticky无效——这是运行时行为，导出前得用 JS 截图或后端生成静态快照
最易被忽略的一点：页头内所有子元素的 box-sizing 必须统一为 border-box，否则 padding/border 会撑破网格轨道，尤其在 fr 单位下表现反直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
