Why Don\'t CSS Transitions Work on Grid Template Properties in All Browsers?

Troubleshooting Transitions in CSS Grid Layout

CSS transitions can be applied to grid properties, allowing for smooth animations. However, certain conditions must be met for transitions to function correctly.

According to the CSS spec, transitions should work on grid-template-columns and grid-template-rows properties when only the values change, without altering the rule's structure. However, this is only supported in Firefox currently. Other browsers may implement it in future updates.

Test Case

Consider the following test case:

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>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

In this case, the transition will not work in browsers other than Firefox, despite being syntactically correct.

The above is the detailed content of Why Don\'t CSS Transitions Work on Grid Template Properties in All Browsers?. For more information, please follow other related articles on the PHP Chinese website!