CSS Animated Grid Layouts
In CSS Grid, the
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.
- chrome 107, Supported 107
- firefox 66, Supported 66
- edge 107, Supported 107
- safari 16, Supported 16
Value Interpolation in CSS #
In CSS you can smoothly transition properties from one value to the other using the
transition: opacity ease-in-out 0.25s;
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.
1? That’s a numerical interpolation.
black? Fade between the source and target colors.
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.
Thanks to our contributors at Microsoft, Chrome–as of version 107–is able to interpolate
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.
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
grid-template-columns: repeat(4, 4em);
transition property in place, the grid smoothly interpolates between values.
The effect also applies to animations that change the
Photo by Ernest Ojeh on Unsplash