使用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 的导航容器，并设置基本样式：
立即学习“前端免费学习笔记（深入）”；
<font face="Courier New">
nav {
display: grid;
grid-auto-flow: row;
gap: 10px;
padding: 1rem;
background: #333;
}
<p>nav a {
color: white;
text-decoration: none;
padding: 0.75rem;
text-align: center;
}
</font></p>此时所有链接会垂直堆叠，适合小屏幕。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
通过媒体查询实现响应式切换
当屏幕变宽时，使用媒体查询改变 grid-auto-flow 为 column 或配合 grid-template-columns 实现更精确控制。
例如，在桌面端让导航项横向排列：
<font face="Courier New">
@media (min-width: 768px) {
nav {
grid-auto-flow: column;
justify-content: start; /* 横向对齐方式 */
}
}
</font>你也可以结合 grid-template-columns 明确指定每列宽度：
<font face="Courier New">
@media (min-width: 768px) {
nav {
grid-auto-flow: unset;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
</font>这样在大屏幕上，导航项会自动均分空间，同时保持响应性。
完整示例代码
<font face="Courier New">
nav {
display: grid;
grid-auto-flow: row;
gap: 10px;
padding: 1rem;
background: #333;
}
<p>nav a {
color: white;
text-decoration: none;
padding: 0.75rem;
text-align: center;
}</p><p>@media (min-width: 768px) {
nav {
grid-auto-flow: column;
justify-content: flex-start;
}
}
</font></p>搭配 HTML：
<font face="Courier New"> <nav> <a href="#">首页</a> <a href="#">关于</a> <a href="#">服务</a> <a href="#">联系</a> </nav> </font>
基本上就这些。通过控制 grid-auto-flow 并配合媒体查询，你可以轻松实现一个简洁、可维护的响应式导航栏，无需额外 JavaScript 或复杂结构。
