使用CSS Grid可直观实现导航栏布局，通过grid-template-columns划分列宽，如三等分或设置左右固定中间自适应，结合align-items和justify-items实现内容居中，配合简洁HTML结构，轻松构建灵活响应式导航栏。
使用 CSS Grid 实现导航栏网格非常直观，关键是合理划分网格区域并分配导航项的位置。下面是一个实用的实现方式。
基本结构与 Grid 布局设置
先定义一个容器作为导航栏，使用 display: grid 启用网格布局，并通过 grid-template-columns 划分列宽。
例如，将导航栏分为 3 个等宽列：.navbar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #333;
color: white;
padding: 1rem 0;
}这样每个导航项会自动占据一个网格单元格，均匀分布。
灵活控制不同区域宽度
如果希望左侧放 logo，中间放菜单，右侧放按钮，可以调整列的比例：
立即学习“前端免费学习笔记（深入）”；
.navbar {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左中右 */
}也可以使用 minmax() 让中间内容自适应：
grid-template-columns: 200px minmax(200px, 1fr) 150px;
对齐内容与文字居中
为了让每个格子内的文字垂直居中并水平居中：
- 使用 align-items: center 垂直居中所有项目
- 使用 justify-items: center 水平居中项目内容
.navbar {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
justify-items: center;
height: 60px;
}配合 HTML 使用示例
HTML 结构建议简洁清晰：
<nav class="navbar">
<div>Logo</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
<button>登录</button>
</nav>此时 ul 和 a 标签可能需要额外样式保证不换行和背景透明，避免破坏布局。
基本上就这些。Grid 让导航栏布局变得灵活又可控，特别适合响应式设计。
