无需:has选择器实现网格列自适应：无内容列收缩，单列占满空间

我们可以通过CSS兄弟选择器结合Grid的列跨度来实现需求，无需依赖:has选择器，也不用修改原有HTML结构：

• 当.mid-left和.mid-right同时存在时，各自平分中间剩余空间
• 当仅存在其中一个时，该元素自动占据全部中间剩余空间

完整实现代码 #

section {
  display: grid;
  grid-template: 
    "l t  t  t" 2em
    "l mt mt r" 1fr
    "l ml mr r" 1fr / 
    5em 1fr 1fr 5em;
  min-height: 8em;
}

section + section {
  margin-top: 2em;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.left      { grid-area: l;  background: antiquewhite; }
.top       { grid-area: t;  background: silver;       }
.right     { grid-area: r;  background: antiquewhite; }
.mid-top   { grid-area: mt; background: yellow;       }
.mid-left  { grid-area: ml; background: aquamarine;   }
.mid-right { grid-area: mr; background: lightsalmon;  }

/* 当.mid-left后无.mid-right时，跨占全部中间列 */
.mid-left:not(+ .mid-right) {
  grid-column: 2 / span 2;
}

/* 当.mid-right前无.mid-left时，跨占全部中间列 */
.mid-right:not(.mid-left ~ .mid-right) {
  grid-column: 2 / span 2;
}

原理说明 #

1. 基础Grid布局保持原有结构，中间两列设为1fr确保两者同时存在时自动平分空间
2. :not(+ .mid-right)匹配后面没有紧跟.mid-right的.mid-left元素，让它跨占第2、3列（全部中间剩余空间）
3. :not(.mid-left ~ .mid-right)匹配前面没有任何.mid-left元素的.mid-right元素，同样让它跨占全部中间剩余空间

适配复杂层级场景 #

针对你提到的包含display: contents容器的实际场景，由于display: contents会让容器的子元素成为Grid的直接子元素，上述兄弟选择器依然有效——只要.mid-left和.mid-right在Grid布局逻辑中属于同级元素，就能正确触发规则。

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