Do CSS Transitions Work on `grid-template-columns` and `grid-template-rows` in All Browsers?

Using CSS Transitions in CSS Grid Layout

In your code snippet, you have correctly implemented the CSS transitions to animate the height of the wrapper class (grid-template-rows). However, transitions for CSS Grid properties are not yet supported in all browsers.

The current specification states that transitions should work on grid-template-columns and grid-template-rows as long as the only changes are to the values of the properties. However, in some browsers, transitions on these properties may not work.

There is an updated implementation that allows transitions on grid-template-columns and grid-template-rows. This implementation is currently only supported in Firefox.

Test Code:

To test if transitions on grid-template-columns and grid-template-rows work in your browser, you can use the following code:

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>

If the height and width of the grid changes smoothly when hovering over the container in Firefox, then transitions on grid-template-columns and grid-template-rows are supported in your browser.

The above is the detailed content of Do CSS Transitions Work on `grid-template-columns` and `grid-template-rows` in All Browsers?. For more information, please follow other related articles on the PHP Chinese website!