CSS Grid结合auto-fit与minmax时的过渡效果失效问题

解决方案 #

问题根源 #

grid-template-columns从repeat(auto-fit, ...)切换到固定比例列定义时，属于不同语法结构的切换，浏览器无法计算两种模式之间的过渡状态，因此无论换用什么单位，过渡都无法触发。

方案1：固定列数+min()实现自适应+过渡 #

放弃auto-fit，改用固定数量的列定义，结合min()函数实现自适应，同时保留hover时的过渡效果：

#grid {
  height: 50vh;
  /* 明确指定过渡属性为grid-template-columns，避免不必要的过渡 */
  transition: grid-template-columns 500ms ease;
  display: grid;
  justify-content: center;
  /* 基础列：4列，每列最小307px，最大按1fr分配空间 */
  grid-template-columns: repeat(4, min(1fr, 307px));
  gap: 2em;
  padding: 2em;
}

:where(.left, .center, .right, .last) {
  border-radius: 1em;
  padding: 2em;
  background: #202020;
  transition: 1s;
}

:where(.left, .center, .right, .last):hover {
  background-blend-mode: hue;
}

/* hover时修改列比例，浏览器可计算过渡状态 */
#grid:has(.left:hover) {
  grid-template-columns: min(2fr, 614px) repeat(3, min(1fr, 307px));
}
#grid:has(.center:hover) {
  grid-template-columns: min(1fr, 307px) min(2fr, 614px) min(1fr, 307px) min(1fr, 307px);
}
#grid:has(.right:hover) {
  grid-template-columns: repeat(2, min(1fr, 307px)) min(2fr, 614px) min(1fr, 307px);
}
#grid:has(.last:hover) {
  grid-template-columns: repeat(3, min(1fr, 307px)) min(2fr, 614px);
}

如果需要在小屏幕下自动减少列数，仅添加一个最小断点的媒体查询即可：

/* 计算阈值：4*307px + 3*2em（gap）≈1300px，可根据实际情况调整 */
@media (max-width: 1300px) {
  #grid {
    grid-template-columns: repeat(2, min(1fr, 307px));
  }
  /* 对应调整hover状态的列比例 */
  #grid:has(.left:hover), #grid:has(.center:hover) {
    grid-template-columns: min(2fr, 614px) min(1fr, 307px);
  }
  #grid:has(.right:hover), #grid:has(.last:hover) {
    grid-template-columns: min(1fr, 307px) min(2fr, 614px);
  }
}

方案2：用transform: scale()模拟列宽变化 #

如果坚持使用auto-fit，可以通过缩放子元素实现视觉上的列宽变化，过渡效果天然生效：

#grid {
  height: 50vh;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(307px, 1fr));
  gap: 2em;
  padding: 2em;
}

:where(.left, .center, .right, .last) {
  border-radius: 1em;
  padding: 2em;
  background: #202020;
  /* 添加transform过渡 */
  transition: transform 500ms ease, background-blend-mode 1s;
  /* 确保子元素占满列空间 */
  width: 100%;
}

:where(.left, .center, .right, .last):hover {
  background-blend-mode: hue;
}

/* hover时缩放目标元素，缩小其他元素 */
#grid:has(.left:hover) .left {
  transform: scaleX(1.2);
}
#grid:has(.left:hover) :where(.center, .right, .last) {
  transform: scaleX(0.8);
}

#grid:has(.center:hover) .center {
  transform: scaleX(1.2);
}
#grid:has(.center:hover) :where(.left, .right, .last) {
  transform: scaleX(0.8);
}

#grid:has(.right:hover) .right {
  transform: scaleX(1.2);
}
#grid:has(.right:hover) :where(.left, .center, .last) {
  transform: scaleX(0.8);
}

#grid:has(.last:hover) .last {
  transform: scaleX(1.2);
}
#grid:has(.last:hover) :where(.left, .center, .right) {
  transform: scaleX(0.8);
}

• 注意：缩放可能影响子元素内部布局，可通过设置子元素overflow: hidden或调整内部元素的适配规则来优化。

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