如何用css Grid实现导航栏多列布局

使用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 布局导航栏，结构清晰，控制精准，尤其适合复杂或多区域的导航设计。