CSS Grid 布局导航菜单更灵活，支持等宽分布、响应式自适应与复杂区域划分。通过 grid-template-columns 实现均分或 minmax() 配合 auto-fit 实现响应式换行，无需媒体查询即可适配移动端；利用网格轨道定义（如 150px 1fr auto）可构建含 Logo、菜单、按钮的复合导航栏；侧边栏可用 40px 1fr 划分图标与文字列，实现精准对齐。相比浮动或 Flexbox，Grid 减少嵌套，结构清晰，更适合现代多样化布局需求。
使用 CSS Grid 布局导航菜单，可以更灵活地控制结构和对齐方式，尤其适合响应式设计。相比传统的浮动或 Flexbox，Grid 能更直观地划分区域，实现复杂的布局效果。
基本的水平导航布局
对于常见的顶部水平导航，可以用 Grid 快速实现等宽或自适应的菜单项排列。
示例：HTML 结构：
<nav class="navbar"> <div>首页</div> <div>产品</div> <div>服务</div> <div>关于</div> <div>联系</div> </nav>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.navbar {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 5个等宽列 */
gap: 1px;
background-color: #333;
padding: 0;
}
<p>.navbar div {
background: #fff;
text-align: center;
padding: 1rem 0;
font-weight: bold;
}
这样每个菜单项自动均分容器宽度，无需额外计算百分比或处理浮动清除问题。
响应式网格导航（适配移动端）
通过 minmax() 和 auto-fit，可以让菜单在不同屏幕下自动换行或调整列数。
.navbar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
padding: 1rem;
}
- 当空间足够时，每项至少 120px，并自动拉伸填满
- 屏幕变窄时，项目自动换行成多行
- 避免媒体查询也能实现基础响应效果
复杂布局：带 Logo 和按钮的导航栏
Grid 特别适合将导航划分为多个逻辑区域，比如左中右三部分。
HTML：
<nav class="complex-nav">
<div class="logo">Logo</div>
<ul class="menu">
<li>首页</li>
<li>产品</li>
<li>服务</li>
</ul>
<button class="cta">登录</button>
</nav>
CSS：
.complex-nav {
display: grid;
grid-template-columns: 150px 1fr auto;
gap: 20px;
align-items: center;
padding: 0 1rem;
background-color: #f8f8f8;
height: 60px;
}
<p>.menu {
display: grid;
grid-auto-columns: max-content;
grid-auto-flow: column;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}</p><p>.cta {
justify-self: end;
}
- 左侧固定宽度放 Logo
- 中间用 1fr 自动填充剩余空间，放菜单
- 右侧自动靠右放置按钮
垂直侧边导航（多层级）
Grid 同样适用于侧边栏菜单，尤其是需要对齐图标与文字的情况。
.sidebar-nav {
display: grid;
grid-template-columns: 40px 1fr;
gap: 10px;
padding: 1rem;
}
<p>.sidebar-nav a {
display: contents; /<em> 让链接包裹整个格子 </em>/
text-decoration: none;
color: #333;
}</p><p>.sidebar-nav span.icon {
place-self: center;
}</p><p>.sidebar-nav span.text {
align-self: center;
}
每个菜单项分为图标列和文本列，视觉对齐更精准。
基本上就这些。CSS Grid 在导航中的优势在于布局自由度高，结构清晰，减少嵌套依赖，特别适合现代网页的多样化需求。不复杂但容易忽略。
