CSS Animated Grid Layouts

In CSS Grid, the grid-template-columns and grid-template-rows properties allow you to 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.

Oct 25, 2022

Bramus

TwitterGitHubHomepage

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.

Interpolating grid-template-columns and grid-template-rows #

Thanks to our contributors at Microsoft, Chrome–as of version 107–is able to interpolate grid-template-columns and grid-template-rows values.

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

In the demo below 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.

Photo by Ernest Ojeh on Unsplash