根据规范，过渡应该在
grid-template-columns和上进行
grid-template-rows。
7.2。 明确的轨道尺寸：
grid-template-rows和grid-template-columns
属性可动画的： 作为长度，百分比或计算的简单列表，但唯一的区别是列表中的长度，百分比或计算分量的值
因此，如果我的解释是正确的，只要对属性的值进行唯一的更改，而对规则的结构没有任何更改，则过渡应该起作用。 但是他们没有 。
更新
这确实有效，但到目前为止仅在Firefox中实现。
这是我创建的测试：
grid-container { display: inline-grid; grid-template-columns: 100px 20vw 200px; grid-template-rows: repeat(2, 100px); background-color: black; height: 230px; transition: 2s; grid-gap: 10px; padding: 10px; box-sizing: border-box;}grid-container:hover { grid-template-columns: 50px 10vw 100px; grid-template-rows: repeat(2, 50px); background-color: red; height: 130px; transition: 2s;}grid-item { background-color: lightgreen;}<grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item></grid-container>在测试中，过渡效果仅适用于高度和背景色，而不适用于
grid-template-rows或
grid-template-columns。
