如何用css实现多层嵌套grid布局

在css中，grid布局不仅可以用于页面整体排版，也允许在一个网格子项内部再开启一套grid，从而形成多层嵌套grid布局。这种做法适合卡片内部分区、后台仪表盘等场景。

外层grid容器定义

先写一个外层容器，用display:grid划分出大的区域。下面代码把页面分为两列，第二列又作为一个网格子项继续布局。

.outer {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}
.side {
  background: #f0f0f0;
}
.main {
  /* 这个子项本身处于外层grid中，同时它自己也是grid容器 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

内层grid如何嵌套

外层.main元素因为在.outer里占了第二列，它自己通过display:grid又分了两列。里面的直接子元素会自动成为内层网格项。

<div class="outer">
  <div class="side">侧边</div>
  <div class="main">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
  </div>
</div>

内层再嵌套第三层

理论上层数不限。我们可以让内层某个box继续变成grid容器，实现三层嵌套。

.box {
  background: #cde;
  padding: 8px;
}
.box.nested {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
}

避免撑乱外层轨道

如果内层内容过宽，可能把外层的1fr列撑大。可以用minmax()限制外层列宽，或者对内层使用overflow处理。

完整示例

以下示例展示了外层两列、内层两列、其中一格再分两行的三层嵌套结构。

<style>
.outer { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 10px; }
.side { background: #eee; }
.main { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.box { background: #dff; padding: 10px; }
.box.nested { display: grid; grid-template-rows: auto 1fr; gap: 6px; }
</style>
<div class="outer">
  <div class="side">菜单</div>
  <div class="main">
    <div class="box">图表</div>
    <div class="box nested">
      <div>标题</div>
      <div>详情内容</div>
    </div>
  </div>
</div>

通过上述方式，用css实现多层嵌套grid布局并不复杂，重点在于每一层都独立声明display:grid，并合理约束轨道尺寸。

CSSgrid布局嵌套grid修改时间：2026-07-26 21:00:20