如何用CSS实现多层嵌套导航等宽横向排列（不修改结构）

针对固定3层嵌套、HTML结构无法修改的场景，**CSS Grid + display: contents**是最优雅的解决方案，能完美实现各层级等宽并排的视觉效果，同时保留原HTML的语义结构。

核心思路 #

1. 将最外层的一级列表设为Grid容器，定义3个等宽列；
2. 利用display: contents让嵌套的列表容器（.subcategory）不生成布局盒子，内部的列表项直接成为外层Grid的子元素；
3. 通过grid-column和grid-row控制不同层级的列表项对应到Grid的指定列和行，实现对齐。

完整CSS代码 #

/* 重置列表默认样式 */
.subcategory {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 最外层Grid容器：3个等宽列，列间设间距 */
.level-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
}

/* 让嵌套的列表容器不生成布局盒子，子元素直接参与外层Grid布局 */
.subcategory {
  display: contents;
}

/* 一级导航项：占据Grid第1列，每个一级项对应3个二级项，跨3行 */
.level-1 > li {
  grid-column: 1;
  grid-row: span 3;
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
}

/* 二级导航项：占据Grid第2列 */
.level-2 > li {
  grid-column: 2;
  background-color: #e8e8e8;
  padding: 1rem;
  border-radius: 4px;
}

/* 第三个二级项对应3个三级项，跨3行 */
.level-2 > li:last-child {
  grid-row: span 3;
}

/* 三级导航项：占据Grid第3列 */
.level-3 > li {
  grid-column: 3;
  background-color: #dcdcdc;
  padding: 1rem;
  border-radius: 4px;
}

效果说明 #

• 三个层级的导航项会显示为宽度完全相等的三列并排盒子，视觉上完全消除嵌套感；
• 同一组的一级、二级、三级项会自动对齐行高，避免布局错乱；
• 保留了原HTML的嵌套语义结构，不影响SEO和无障碍访问。

适配动态数量的补充方案 #

如果二级/三级项的数量不固定，可去掉grid-row: span 3的设置，改用grid-auto-flow: row dense让Grid自动填充空白行：

.level-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: start;
  grid-auto-flow: row dense; /* 自动填充空白行 */
}

.level-1 > li {
  grid-column: 1;
  /* 去掉固定跨行数 */
}

.level-2 > li {
  grid-column: 2;
}

.level-3 > li {
  grid-column: 3;
}

内容的提问来源于stack exchange，提问作者Sidius