Can CSS Grid Layout Properties Be Animated?

Animating CSS Grid Layout Properties

Despite the CSS Grid Layout specification indicating that transitions should apply to grid-template-columns and grid-template-rows, it does not currently work in most browsers.

Current Implementation:

Firefox supports animating grid properties, and provides an example here:
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

Caveat:

The grid structure cannot change while animating the row and column dimensions. For instance, adding or removing rows would break the animation.

Test Code:

Consider the following test:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <!-- Additional items -->
</grid-container>

Note: The test code in this example is enclosed in HTML comments for proper display.

The above is the detailed content of Can CSS Grid Layout Properties Be Animated?. For more information, please follow other related articles on the PHP Chinese website!