CODEWITHSUNDEEP
cssmedia-queriescss-grid
Sandra
Sandra

Reputation: 159

CSS grid: Animate transition of number of columns using pure CSS (media queries)

I'm using different media queries to change the number of columns of my CSS grid depending on the browser width. I would like to achieve some kind of animation effect when the grid boxes are changing their position according to this. How can this be achieved using pure CSS?

Parts of the code:

.wrapper {
width: 100%;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, 300px);
grid-template-rows: repeat(10), 300px);
}

@media only screen and (max-width: 1960px) {
  .wrapper {
    grid-template-columns: repeat(5, 300px);
  }
}

@media only screen and (max-width: 1460px) {
  .wrapper {
    grid-template-columns: repeat(4, 300px);
  }
}

Upvotes: 2

Views: 726

Answers (1)

Paulie_D
Paulie_D

Reputation: 115108

This is not possible with CSS.

The number of columns or rows is not animatable. Equally, grid areas are not elements and so cannot be selected with CSS.

Grid Template Columns

Animation type:simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list.

Upvotes: 2

Related Questions