title: Can I animate "grid-column"?
body: <p>I set <code>transition: all ease-in-out 1s;</code>, but going the same way changing the properties of the <code>grid-column</code> does not work with <code>transition</code>.</p>
  
  <p>Is there any other way to use animation here?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="projects"&gt;
      &lt;div class="project" style="background: url(img/p1.png) center no-repeat / cover"&gt;&lt;/div&gt;
      &lt;div class="project" style="background: url(img/p2.jpg) center no-repeat / cover"&gt;&lt;/div&gt;
      &lt;div class="project" style="background: url(img/p3.jpg) center no-repeat / cover"&gt;&lt;/div&gt;
      &lt;div class="project" style="background: url(img/p4.png) center no-repeat / cover"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>
  
  <p>I uploaded a light version on <a href="https://codepen.io/anon/pen/qwqJRE" rel="noreferrer">codepen</a></p>