Can I animate "grid-column"?

Question

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

Answer 1

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