使用CSS Grid的grid-auto-flow属性可控制导航项排列方式，配合媒体查询实现响应式布局；2. 小屏幕下grid-auto-flow设为row使导航项垂直堆叠；3. 大屏幕下改为column或结合grid-template-columns实现横向布局；4. 最终通过纯CSS完成从移动端到桌面端的自适应导航栏设计。
使用CSS Grid结合 grid-auto-flow 和媒体查询（media queries）可以创建一个结构清晰且响应式良好的导航栏。这种方法灵活、现代，适用于从移动端到桌面端的多设备适配。
理解 grid-auto-flow 的作用
grid-auto-flow 控制网格容器中自动放置的子元素如何排列。在导航栏中，你可以用它来动态控制导航项是横向排列还是纵向堆叠。
常用值包括：
- row：按行填充（默认），适合桌面端横向布局
- column：按列填充，适合移动端垂直排列
- row dense 或 column dense：尝试填补空隙，一般导航栏不常用
使用 Grid 创建基础导航结构
先定义一个使用 Grid 的导航容器，并设置基本样式：
立即学习“前端免费学习笔记（深入）”；
nav {
display: grid;
grid-auto-flow: row;
gap: 10px;
padding: 1rem;
background: #333;
}
nav a {
color: white;
text-decoration: none;
padding: 0.75rem;
text-align: center;
}
此时所有链接会垂直堆叠，适合小屏幕。
通过媒体查询实现响应式切换
当屏幕变宽时，使用媒体查询改变 grid-auto-flow 为 column 或配合 grid-template-columns 实现更精确控制。
例如，在桌面端让导航项横向排列：
@media (min-width: 768px) {
nav {
grid-auto-flow: column;
justify-content: start; /* 横向对齐方式 */
}
}
你也可以结合 grid-template-columns 明确指定每列宽度：
@media (min-width: 768px) {
nav {
grid-auto-flow: unset;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
这样在大屏幕上，导航项会自动均分空间，同时保持响应性。
完整示例代码
nav {
display: grid;
grid-auto-flow: row;
gap: 10px;
padding: 1rem;
background: #333;
}
nav a {
color: white;
text-decoration: none;
padding: 0.75rem;
text-align: center;
}
@media (min-width: 768px) {
nav {
grid-auto-flow: column;
justify-content: flex-start;
}
}
搭配 HTML：
基本上就这些。通过控制 grid-auto-flow 并配合媒体查询，你可以轻松实现一个简洁、可维护的响应式导航栏，无需额外 JavaScript 或复杂结构。
