嵌套Div结构下CSS Grid布局列访问异常问题求助

这个问题我之前也碰到过，核心是没搞清楚CSS Grid的作用范围——Grid布局只在网格容器和它的直接子元素（网格项）之间生效。你现在把 .left 和 .right 塞进了一个额外的 <div> 里，这个外层 <div> 才是 .wrapper 的直接网格项，而 .left/.right 是这个内层 <div> 的子元素，它们根本不属于 .wrapper 的网格系统，所以你给它们设置的 grid-column 自然不会起作用。

下面给你几个不用大改HTML结构的解决方案，按推荐程度排序：

方案1：使用CSS Subgrid（最优雅，最小改动） #

Subgrid 是CSS Grid的进阶特性，允许子网格容器直接继承父容器的网格轨道定义，这样内层元素就能直接对齐到父容器的网格线。现在主流浏览器（Chrome、Firefox、Edge）都支持它，完全契合你的需求：

修改后的CSS代码：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1fr; /* 你原来写的`1`是笔误，改成`1fr`才能让行高自适应内容 */
}
.cent {
  grid-column: 2;
  grid-row: 1;
}
/* 给包裹left/right的那个直接子div设置子网格 */
.wrapper > div:not(.cent) {
  display: grid;
  grid-template-columns: subgrid; /* 继承父容器的3列布局 */
  grid-column: 1 / -1; /* 让这个子容器占据父容器的全部列 */
  grid-row: 1; /* 和.cent处于同一行 */
}
.left {
  grid-column: 1; /* 现在可以直接关联父容器的第1列 */
}
.right {
  grid-column: 3; /* 直接关联父容器的第3列 */
}

完全不需要改动HTML，就能让 .left 和 .right 回到原来的位置，和 .cent 保持正确的网格对齐。

方案2：Flex布局模拟（兼容性更好） #

如果你需要兼容不支持Subgrid的旧浏览器（比如Safari 15.4之前的版本），可以用这个方法：让包裹div占据父容器的全部列，内部用Flex布局把left和right分别推到左右两端，模拟网格位置：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1fr;
}
.cent {
  grid-column: 2;
  grid-row: 1;
}
.wrapper > div:not(.cent) {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: space-between; /* 让left和right分别对齐左右 */
  align-items: center; /* 可选，让内容垂直居中，和.cent保持一致 */
}
/* 让left/right的宽度和父容器的列宽完全匹配 */
.left, .right {
  width: calc((100% - 10px) / 3); /* 10px是grid-gap的宽度，计算后和父容器1fr的宽度一致 */
}

这个方法需要手动计算宽度，但兼容性拉满，适合需要支持旧版浏览器的场景。

方案3：绝对定位hack（不推荐，仅应急） #

如果以上两种方法都用不了，万不得已可以用绝对定位强行把right放到第3列的位置，但这个方法维护性很差，不推荐长期使用：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1fr;
  position: relative; /* 给父容器加相对定位 */
}
.cent {
  grid-column: 2;
  grid-row: 1;
}
.wrapper > div:not(.cent) {
  grid-column: 1; /* 让包裹div先占第1列 */
  grid-row: 1;
}
.right {
  position: absolute;
  top: 0;
  left: calc(100% + 10px + 100%); /* 100%是left的宽度，10px是gap，100%是cent的宽度 */
  width: calc(100% / 3);
}

这个方法完全依赖硬编码的间距和宽度，父容器布局改动后需要同步修改这些值，非常容易出问题。

总的来说，你的思路本身没问题，只是对Grid的作用范围理解有偏差。用Subgrid是最完美的解决方案，几乎不需要修改现有结构，能完美实现你想要的布局。

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