迹忆客 专注技术分享

在 CSS Grid 中，grid-template-columns 和 grid-template-rows 属性允许我们分别定义行名称和跟踪网格列和行的大小。 支持这些属性的插值允许网格布局在状态之间平滑过渡，而不是在动画或过渡的中间点捕捉。

CSS 中的插值

在 CSS 中，我们可以使用 transition 属性将属性从一个值平滑地过渡到另一个值。

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

渲染引擎将自动检测目标属性值的类型，并使用该信息平滑过渡到新值。

例如：

• 将 opacity 从 0 过渡到 1？ 那是一个数值插值。
• 将background-color 从白色过渡到黑色？ 在源颜色和目标颜色之间淡入淡出。
• 过渡 width？ 进行数值插值，如果需要，沿途转换单位。

这同样适用于 CSS 动画，浏览器将在关键帧之间进行值插值。

使用自定义属性时，请使用 @property 指明它们是哪种类型。 这样浏览器就知道如何从一个值转换到另一个值。

grid-template-columns 和 grid-template-rows

从 107 版开始，Chrome 能够插入 rid-template-columns 和 grid-template-rows 值。

网格布局可以在状态之间平滑过渡，而不是在动画或过渡的中间点捕捉。

在下面的演示中，网格显示了几个头像。 为了节省空间，通过使用 grid-template-columns 限制每列的宽度。 悬停时，每列都有更多空间。

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

有了 transition 属性，网格就可以在值之间平滑地插值。

该效果也适用于更改 grid-template-columns 或 grid-template-rows 值的动画。

可以点击 尝试一下 在线查看效果。