实现响应式导航栏最轻量可控的方式是用 grid-auto-flow 控制排列方向、@media 切换断点逻辑：小屏设 grid-auto-flow: row 实现垂直堆叠，大屏用 grid-template-columns 显式定义横向结构，媒体查询仅调整布局结构而非组件样式。
grid-auto-flow 控制排列方向，@media 切换断点逻辑 —— 这是实现响应式导航栏最轻量、最可控的方式，不用 JS，也不依赖 Flex 的隐式行为。
小屏下用 grid-auto-flow: row 垂直堆叠导航项
移动端窄屏时，水平空间紧张，强行横向铺开会导致文字折行、按钮过小或出现横向滚动。直接设 grid-auto-flow: row 让 Grid 自动按行方向逐个放置子项，配合 grid-template-columns: 1fr 就能自然形成单列垂直布局。
- 别写
display: flex; flex-direction: column—— Grid 在这里更语义清晰，且后续扩展（比如加图标对齐、悬停区域控制）更稳定 - 确保父容器有明确高度或 min-height，否则某些浏览器在空内容时会塌陷
- 如果导航项含
padding或border，记得用box-sizing: border-box，避免尺寸计算偏差
大屏用 grid-template-columns 显式定义横向结构
桌面端需要明确列数和间距，靠 auto-fit + minmax() 容易让导航项过窄（尤其文字长度不均时），不如直接用固定列定义或等分比例。
- 推荐写法：
grid-template-columns: repeat(5, 1fr)或grid-template-columns: 120px 1fr 1fr 1fr 120px（首尾固定宽，中间自适应） - 若导航项数量动态变化，可用
repeat(auto-fit, minmax(120px, 1fr))，但必须搭配justify-content: center防止左侧对齐留白 - 别在媒体查询里覆盖
grid-auto-flow为column—— 它只影响自动放置顺序，不控制列数，容易和grid-template-columns冲突
@media 中只改布局结构，不碰卡片级样式
很多人在断点里反复调 font-size、padding、gap，结果维护时改一处漏十处。真正该被媒体查询接管的，只有“是否参与布局流”和“整体结构形态”这两类事。
- 该改的：
display: none（隐藏移动端不需要的搜索框）、grid-template-areas（重排 logo / nav / cta 区域）、grid-template-columns（从 1fr 改为 3fr 1fr） - 不该改的：
background-color、border-radius、transition—— 这些属于组件自身样式，应写在默认规则里 - 特别注意：
grid-column或grid-row的显式定位值（如grid-column: 2 / 4）在断点里必须重写，否则会沿用旧跨度导致错位
避免在 @media 里重写 repeat() 固定值
这是最常被误用的点：看到平板显示三列就写 @media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); }。问题在于，它锁死了列数，破坏了 Grid 的连续响应能力。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是保持主逻辑统一：
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))，然后只在极小屏（max-width: 480px）强制单列，或在超大屏（min-width: 1440px）加max-width限宽 - 如果你真需要某断点固定列数（比如广告位必须占两列），用
grid-column: span 2而不是改整个repeat() - 测试时重点看 768px–1024px 这个区间 —— 很多“卡死”的列数问题，都出在这里
@media 是兜底开关，不是列数遥控器。真正要花时间调的，是 minmax() 的下限值和各断点的结构切换时机，而不是反复微调像素级间距。 
