CSS Grid布局下如何让伪类匹配middle网格区域宽度实现hover动画

calc() 仅支持数值类的四则运算，无法直接读取 grid-area 这类布局属性的值，CSS目前也没有原生语法支持直接获取命名网格区域的尺寸，所以你之前的写法不符合规范，无法生效。

可行解决方案 #

方案1：相对定位+百分比宽高（最推荐）

如果你的伪类是挂载在middle对应的网格元素上，直接通过定位继承父元素尺寸即可，不需要手动计算：

• 给middle网格元素添加相对定位

.your-middle-element {
  grid-area: middle;
  position: relative;
  /* 保留你原有其他样式 */
}

• 给伪类设置绝对定位，宽高设为100%

.your-middle-element::before /* 或你用到的::after伪类 */ {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 保留你原有动画相关的其他样式 */
}

这个方案可以完美适配middle区域的任意尺寸变化，不管网格后续怎么调整自适应规则都不需要修改伪类的宽高配置。

方案2：CSS变量同步尺寸（适合伪类需要保留在正常文档流的场景）

如果你因为业务逻辑不能用绝对定位，可以把网格的行列尺寸抽成公共CSS变量，统一调用：

• 先定义公共变量同步网格行列尺寸

:root {
  /* 和你grid-template-columns、grid-template-rows的计算逻辑保持一致 */
  --grid-col-width: calc(90vw / 3);
  --grid-row-height: calc(90vh / 3);
}

• 网格容器用变量定义行列

.grid-container {
  width: 90vw;
  height: 90vh;
  display: grid;
  grid-template-columns: repeat(3, var(--grid-col-width));
  grid-template-rows: repeat(3, var(--grid-row-height));
  /* 保留你原有grid-template-areas配置 */
}

• 伪类直接调用变量计算宽度，跨几列就用单格宽度乘几

.your-middle-element::before {
  /* 示例为middle跨2列的情况，根据你实际跨列数调整乘数即可 */
  width: calc(var(--grid-col-width) * 2);
  height: var(--grid-row-height);
  /* 保留你原有其他样式 */
}

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