使用CSS Grid和媒体查询可高效构建响应式导航栏。首先定义网格容器，通过display: grid和fr单位划分区域，如左侧logo占1份、右侧链接占2份，并垂直居中。右侧链接用justify-self: end靠右排列，结合grid-auto-flow: column实现等间距水平布局。当屏幕小于768px时，媒体查询将布局改为单列，grid-template-columns: 1fr使元素上下排列，文字居中，菜单居中显示并加外边距优化移动端体验。建议使用minmax()增强弹性，配合transition提升动画效果，必要时用JavaScript实现汉堡菜单交互，但纯CSS亦可满足多数需求。关键在于合理划分网格区域，并随视口变化调整结构与对齐方式。
响应式导航栏是现代网页设计中的核心组件。使用 CSS Grid 结合媒体查询，可以灵活、高效地构建在不同设备上都能良好显示的导航结构。下面介绍如何通过网格布局和断点控制实现这一目标。
定义基础网格容器
将导航栏设为网格容器，利用 display: grid 划分区域。适合用 fr 单位分配可用空间，让布局更具弹性。
例如：
nav {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
padding: 1rem;
background: #333;
color: white;
}
左侧放 logo（1份宽度），右侧放导航链接（2份宽度），垂直居中对齐。
设置导航项目对齐方式
右侧菜单项可进一步使用内层网格或 justify-self 控制位置。若希望链接右对齐，可设置容器属性。
示例：
.nav-links {
justify-self: end;
display: grid;
grid-auto-flow: column;
gap: 1.5rem;
}
这样链接水平排列，间距一致，且整体靠右。
立即学习“前端免费学习笔记（深入）”；
使用媒体查询适配小屏幕
当屏幕变窄时，切换为单列布局，隐藏部分元素或改为汉堡菜单更合适。
添加断点：
@media (max-width: 768px) {
nav {
grid-template-columns: 1fr;
text-align: center;
}
.nav-links {
justify-self: center;
margin-top: 0.5rem;
}
}
此时 logo 与链接上下排列，居中展示，更适合手机浏览。
增强交互与可访问性
配合简单的 JavaScript 可实现点击展开菜单，但纯 CSS 方案也足够应对多数场景。
建议：- 为小屏添加 display: none 控制临时隐藏菜单
- 使用 minmax() 提升自适应能力，如 grid-template-columns: 1fr minmax(200px, 3fr)
- 加入 transition 动画提升视觉体验
基本上就这些。Grid 提供了强大的二维布局能力，搭配媒体查询能轻松实现响应式导航。关键在于合理划分区域，并在不同视口下调整结构与对齐方式。不复杂但容易忽略细节。
