用grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))实现小屏页眉自动堆叠，配合white-space: nowrap防折行；Logo固定宽、导航占满剩余空间用grid-template-columns: 160px 1fr；响应式优先改grid-template-areas而非重写全部结构。
Grid怎么让页眉导航在小屏自动堆叠
用 grid-template-columns 配合 minmax() + auto-fit 是最稳的解法，比媒体查询更轻量、更可维护。
常见错误是直接写死列数（比如 grid-template-columns: repeat(5, 1fr)），结果小屏上文字挤成一团甚至换行错乱。
正确做法是让 Grid 自动计算能放几列：
-
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))—— 每项最小 120px，大屏尽可能均分剩余空间 - 搭配
grid-auto-flow: column可切换为横向优先填充（少见，一般不用） - 注意：必须给直接子元素（如
下的）设white-space: nowrap，否则文字在窄列里会意外折行
如何让Logo固定宽度、菜单自动占满剩余空间
页眉典型结构是左 logo + 中/右导航，Grid 天然适合这种“弹性+固定”的混合布局。
别用 flex 的 flex: 1 去撑开菜单——它无法响应 Grid 容器的隐式轨道变化，容易和 grid-gap 冲突。
推荐写法：
header {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
}
.logo { grid-column: 1; }
.nav { grid-column: 2; }
如果需要三栏（logo + nav + actions），就写 grid-template-columns: 160px 1fr max-content，max-content 能让搜索框或按钮按内容宽度自适应，不浪费空间。
响应式断点下怎么避免重复定义Grid结构
很多人每个媒体查询里都重写一整套 grid-template-areas 或 grid-template-columns，维护成本高，还容易漏掉某处 grid-row 的调整。
真正省事的方式是只改关键轨道定义，其他靠 Grid 自动对齐：
- 默认移动优先：用
grid-template-areas: "logo" "nav"+grid-template-columns: 1fr - 中屏开始横排：
@media (min-width: 768px) { grid-template-areas: "logo nav"; } - 大屏加右侧操作区：
@media (min-width: 1024px) { grid-template-areas: "logo nav actions"; } - 只要子元素都设了
grid-area（如grid-area: logo），布局就自动重组，不用动 HTML 结构
为什么用Grid做页眉比Flex更可控
Flex 在多行导航（比如二级菜单触发后展开）时，主轴方向固定，很难让子菜单精准对齐到对应一级项下方；Grid 则能用 grid-row 和 grid-column 显式定位，且不影响其他区域流式行为。
另一个实际坑点：Flex 的 justify-content: space-between 在项数少于容器宽度时，会导致最后一项被甩到最右，中间空一大段；Grid 的 1fr 分配天然填满可用空间，视觉更均衡。
不过要注意：IE11 不支持现代 Grid（尤其 auto-fit 和 grid-area），如果还要兼容，得 fallback 到 Flex + JS 补位，不是纯 CSS 能解决的。
复杂点往往不在怎么写 Grid，而在于要不要保 IE、要不要支持键盘导航焦点顺序、以及下拉菜单是否要脱离文档流——这些都会反过来限制 Grid 的使用方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
