CODEWITHSUNDEEP
htmlcsscss-transitionscss-grid
MadLax
MadLax

Reputation: 1339

Can I animate "grid-column"?

I set transition: all ease-in-out 1s;, but going the same way changing the properties of the grid-column does not work with transition.

Is there any other way to use animation here?

<div class="projects">
    <div class="project" style="background: url(img/p1.png) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p2.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p3.jpg) center no-repeat / cover"></div>
    <div class="project" style="background: url(img/p4.png) center no-repeat / cover"></div>
</div>

.projects {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-auto-rows: 500px;
}
.project {
    width: 100%;
    transition: all ease-in-out 1s;
}
.project:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
.project:nth-child(1):hover {
    grid-column: 1/3;
    z-index: 2;
}

I uploaded a light version on codepen

Upvotes: 11

Views: 15523

Answers (3)

Temani Afif
Temani Afif

Reputation: 273021

You can simulate such effect using margin like below:

.projects {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-auto-rows: 500px;
}
.project {
    transition: 
      margin ease-in-out 1s,
      z-index 0s 1s;
}
.project:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    z-index:0;
}
.project:nth-child(1):hover {
    margin-right:-200%;
    z-index: 2;
}
<div class="projects">
    <div class="project" style="background: red"></div>
    <div class="project" style="background: blue"></div>
    <div class="project" style="background: green"></div>
    <div class="project" style="background: yellow"></div>
</div>

Related: Why are only some of my CSS Grid boxes expanding when I hover over them?

Upvotes: 1

rob2d
rob2d

Reputation: 1166

A little bit late with this reply but unfortunately: no, it's not possible and it probably will not become part of the spec as there are other special properties with how grids are displayed by the browser for efficiency's sake.

As an alternative, and for the purpose of the demo you provided, similar layouts can be done via display:flex + flex-grow:n where the value n is an integer and can be thought of as equivalent to nfr. You can also use flex-basis and specify a % or px which is animatable as well.

Upvotes: 1

Donkey Shame
Donkey Shame

Reputation: 764

It doesn't appear that you can, in the sense you mean, animate grid-column, based on the documentation over at Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

Grid column's animation type is discrete, meaning there's no "tweening" or interpolation.

That's a bummer.

There are some hacky (or in other cases, JS-heavy) workarounds, but YMMV according to how much effort you want to put into it. See this thread, for example:

animating a smooth css grid-column change

Upvotes: 8

Related Questions