grid-template-columns从fr到px值无法实现平滑过渡的问题求助

问题原因 #

直接在grid-template-columns中切换255px和1fr无法触发过渡动画，核心原因是：

• fr是基于容器可用空间的相对单位，255px是绝对单位，浏览器无法在两种不同类型的长度值之间计算过渡插值
• transition-behaviour: allow-discrete仅针对原本不支持过渡的离散属性（如display），无法解决单位类型不兼容的问题，且目前浏览器支持度极低

解决方案 #

放弃修改grid-template-columns的思路，转而通过过渡卡片自身的width属性实现平滑伸缩，同时保持Grid布局的结构：

修改后的CSS代码 #

.test123 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列均使用相对单位，保证布局自适应 */
  gap: 30px;

  .card {
    border-radius: 50px;
    border: 1px solid #BBD0FB;
    height: 100px;
    width: 255px; /* 默认固定宽度 */
    margin: 0 auto; /* 居中显示，维持初始布局 */
    transition: width 200ms ease; /* 给width属性添加过渡动画 */
  }

  .c1 {
    background-color: red;
  }

  .c2 {
    background-color: blue;
  }
}

/* hover时让目标卡片占满所在列的宽度 */
.test123:has(.c1:hover) .c1 {
  width: 100%;
}

.test123:has(.c2:hover) .c2 {
  width: 100%;
}

HTML代码（无需修改） #

<div class="test123">
  <div class="card c1"></div>
  <div class="card c2"></div>
</div>

原理说明 #

通过将Grid列宽设为1fr 1fr，让列宽自适应容器空间；卡片默认使用固定宽度并居中，hover时将卡片宽度设为100%占满列宽，利用width属性的可过渡特性实现平滑伸缩效果。

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