Grid layouts that animate instead of snap

CSS Grid layouts can now transition and animate their track sizes smoothly. The grid-template-columns and grid-template-rows properties support interpolation, so a layout can glide between two states rather than jumping abruptly at the midpoint of an animation or transition. This capability is supported in Chrome 107, Edge 107, Firefox 66, and Safari 16.

How CSS value interpolation works

The CSS transition property lets you change a property value over time. The rendering engine inspects the value type of the target property and picks the appropriate interpolation method automatically:

  • opacity from 0 to 1 uses numeric interpolation.
  • background-color from white to black fades between the two colors.
  • width interpolates numerically, converting units as necessary.

CSS animations work the same way: the browser interpolates values between keyframes based on their types.

Animating track sizes

The same interpolation logic now applies to grid track sizing. Consider a grid that displays several avatars in a constrained space. By using grid-template-columns to shrink each column, the avatars overlap and conserve space. When the user hovers over the grid, each column expands to reveal more of the avatar.

.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);
}

With a transition declared on the grid, the column widths interpolate smoothly between the collapsed and expanded states.

The behavior is also available in CSS animations. Keyframes that modify grid-template-columns or grid-template-rows will animate between their values instead of snapping, enabling more fluid and expressive layout changes.