使用CSS Grid可实现导航栏多列布局，通过display: grid定义容器，grid-template-columns设置列宽，如1fr 1fr 1fr或1fr minmax(200px,3fr) 1fr；利用grid-column分配项目位置，支持跨列与区域对齐；结合媒体查询@media (max-width:768px)调整为单列堆叠，确保响应式适配，结构清晰且控制精准。
使用 CSS Grid 实现导航栏的多列布局，可以灵活控制每个导航项的位置和尺寸，特别适合需要对齐、响应式或非均匀分布的菜单结构。关键在于定义网格容器和分配网格区域。
设置网格容器
将导航栏的父元素设为 display: grid，并使用 grid-template-columns 定义列的宽度。例如，创建一个三列等宽布局：
.nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
也可以使用 minmax() 或固定值来设定更灵活的列宽，比如让中间列更宽：
grid-template-columns: 1fr minmax(200px, 3fr) 1fr;
分配导航项目位置
通过 grid-column 控制每个导航项跨越的列。例如，让“首页”占第一列，“产品”占中间大列，“关于”和“联系”并排在右侧两列：
立即学习“前端免费学习笔记（深入）”；
.home { grid-column: 1; }
.products { grid-column: 2; }
.about { grid-column: 3; }
.contact { grid-column: 3; }
若想让某个项横跨多列，比如加一个横幅链接：
.banner { grid-column: 1 / 4; }
响应式调整
配合媒体查询，在小屏幕上改为单列堆叠：
@media (max-width: 768px) {
.nav {
grid-template-columns: 1fr;
}
.nav-item {
grid-column: auto;
}
}
这样在移动端也能保持良好可读性。
基本上就这些。用 Grid 布局导航栏，结构清晰，控制精准，尤其适合复杂或多区域的导航设计。
