CSS animated grid layouts

Bramus

In CSS Grid, the grid-template-columns and grid-template-rows properties let you define line names and track sizing of grid columns and rows, respectively. Supporting interpolation for these properties allows grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition.

Value Interpolation in CSS

In CSS you can smoothly transition properties from one value to the other using the transition property.

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

#target:hover {
  opacity: 1;
}

The rendering engine will automatically detect the type of the targeted property’s value, and use that information to smoothly transition to the new value.

For example:

• Transitioning opacity from 0 to 1? That’s a numerical interpolation.
• Transitioning background-color from white to black? Fade between the source and target colors.
• Transitioning width? Interpolate numerically, converting units along the way if needed.

The same applies to CSS animations, where the browser will do value interpolation between keyframes.

Animate grid-template-columns and grid-template-rows

Grid layouts can also smoothly transition between states, instead of snapping at the halfway point of an animation or transition.

In the following demo a grid is showing several avatars. To conserve space, the avatars are laid out on top of each other by limiting the width of each column using grid-template-columns. On hover, each column is given more space.

.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 the transition property in place, the grid smoothly interpolates between values.

The effect also applies to animations that change the grid-template-columns or grid-template-rows values.