使用CSS Grid可高效实现导航栏布局，通过grid-template-columns定义列结构并结合justify-items控制对齐方式。例如用1fr单位创建四等分导航栏，或调整为2fr 1fr 1fr 1fr使首页更宽；利用justify-items:center使所有项居中对齐，支持start、end、center、stretch等值；子项为链接时自动纳入网格；响应式设计可通过媒体查询在小屏设为单列grid-template-columns:1fr。该方法比浮动或Flexbox更直观，适合构建灵活清晰的导航布局。
使用CSS Grid实现导航栏布局简单高效，核心是grid-template-columns定义列结构，配合justify-items控制内容对齐方式。这种方式比传统浮动或Flexbox更直观，尤其适合响应式设计。
定义Grid容器与列布局（grid-template-columns）
将导航栏设为Grid容器后，通过grid-template-columns划分列宽。可使用固定值、百分比或fr单位分配可用空间。
例如，创建一个四等分的导航栏：
.navbar {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; /* 四个等宽列 */
gap: 10px;
padding: 10px;
background: #f0f0f0;
}也可设置不同宽度，如让“首页”更宽：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: 2fr 1fr 1fr 1fr;
控制项目对齐方式（justify-items）
justify-items用于设置网格项在列轴上的对齐方式。常用于统一所有项目的水平对齐。
若希望每个导航项文字居中：
.navbar {
justify-items: center; /* 所有子项内容水平居中 */
}支持的值包括：start（左对齐）、end（右对齐）、center（居中）、stretch（拉伸填满）。
注意：justify-items作用于整个容器内所有项目。若需单独控制某个项，改用justify-self。
结合文本链接与响应式优化
实际导航栏通常包含<a>标签。确保Grid正确应用在父容器上，子项自动纳入网格。
<nav class="navbar"> <a href="#">首页</a> <a href="#">产品</a> <a href="#">服务</a> <a href="#">联系</a> </nav>
加入响应式：在小屏幕上改为单列堆叠：
@media (max-width: 600px) {
.navbar {
grid-template-columns: 1fr;
}
}基本上就这些。利用grid-template-columns划分结构，justify-items统一对齐，就能快速构建清晰、灵活的导航栏布局，不复杂但容易忽略细节对齐逻辑。
