Widely availableSupported across all major browsers. Safe to use in production.
Layout Widely available

Grid animation

Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.

Layout

Overview

Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.grid-template-columns.animation
107
107
66
16
107
16
CSS property
animation

Animation of tracks
107
107
66
16
107
16
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s ease;
}
.grid.collapsed {
  grid-template-columns: 0fr 1fr;
}

Live demo

columnwidthanime

CSS columnwidthanime demo.

PreviewFullscreen

row. toggle

CSS row. toggle demo.

PreviewFullscreen

Hover state

CSS hover in change demo.

PreviewFullscreen

Use cases

  • Using Grid animation

    Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features