响应式导航主干逻辑是用repeat(auto-fit, minmax(140px, 1fr)))实现自适应列数，配合justify-content: center和clamp()优化宽度，移动端降为1fr单列，@media仅调整布局结构而非样式。
grid-template-columns + auto-fit 是响应式导航的主干逻辑
别一上来就写 @media，先让导航在大多数宽度下自己“长”出合适列数。核心是用 repeat(auto-fit, minmax(140px, 1fr)) —— 它会让每个导航项至少宽 140px，超出部分自动等分，列数随容器缩放动态增减。
常见错误：写成 repeat(4, 1fr) 或 1fr 1fr 1fr 1fr，结果小屏直接溢出或文字折行；或者用 auto-fill 而不是 auto-fit，导致空列残留、视觉留白难控制。
-
auto-fit会合并空轨道，auto-fill只管填满，不关心内容是否真需要那列 - 最小宽度建议设为
clamp(120px, 25vw, 160px)，比纯minmax(120px, 1fr)更抗窄屏挤压和缩放抖动 - 必须配
justify-content: center，否则默认左对齐，右侧大片空白
小屏切换单列时，只改 grid-template-columns，别碰 grid-auto-flow
移动端真正要做的，只是把多列结构降维成单列，而不是“翻转流向”。设 grid-template-columns: 1fr 就够了，grid-auto-flow 保持默认 row 更直观、更安全。
很多人加 grid-auto-flow: column 想“竖排”，结果发现没变化——因为没定义列数，浏览器仍把所有项塞进第 1 列（无限宽），根本不会往下走。
- 如果真要用
column（比如抽屉菜单），必须同步设grid-template-columns: 1fr和grid-auto-rows: auto，否则行为不可控 -
grid-auto-flow: row dense或column dense在导航里是雷区：一旦某个项加了grid-column: span 2，dense 会插空破坏 tab 顺序和屏幕阅读器流 - IE 完全不支持
grid-auto-flow，若需兼容，这个属性就得彻底绕开
@media 里只动布局结构，不动组件样式
媒体查询该管的只有两件事：哪些区域参与布局流、整体结构怎么搭。字体大小、圆角、边框、过渡动画这些，属于组件自身特征，写在默认规则里就行。
典型反模式：在每个断点里反复调 padding、font-size、gap，结果改一处漏十处，维护成本爆炸。
- 该改的：
display: none（隐藏小屏不需要的搜索框）、grid-template-areas（重排 logo / nav / cta）、grid-template-columns（从repeat(auto-fit, ...)改为1fr） - 不该改的：
background-color、border-radius、transition、text-align（除非语义变了，比如从右对齐变成居中） - 显式定位值如
grid-column: 2 / 4必须在断点里重写，否则沿用旧跨度会导致错位
父容器高度与盒模型容易被忽略
导航栏在空内容或动态加载时塌陷，往往不是 Grid 写错了，而是父容器没撑起高度。尤其当所有子项都 display: contents 或用了 visibility: hidden 时，Grid 容器可能“看不见”子项。
另外，导航项若有 padding 或 border，但没设 box-sizing: border-box，就会导致尺寸计算偏差，列宽实际超出预期。
- 给父容器加
min-height: 60px或height: fit-content，比依赖内容撑高更可靠 - 全局加
* { box-sizing: border-box }是底线，别只在导航里局部写 - 避免在
@media里重写repeat()的固定值，比如repeat(3, 1fr)—— 这等于锁死列数，破坏 Grid 的连续响应能力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
