可以对网格模板列的更改进行过渡动画处理吗？

Question

我正在使用CSS网格，试图在屏幕变小时使列平滑地闭合（宽度= 0）。

.red {
  grid-area: red;
  background-color: #e00025;
}

.green {
  grid-area: green;
  background-color: #bdf681;
}
.blue {
  grid-area: blue;
  background-color: #d3e1f6;
}
.animate {
  transition: all 0.5s ease-in-out;
}
.xWrapper {
  display:grid;
  width:100vw;
  height:calc(100vh - 10px);
  grid-gap:1em;
  grid-template-rows:1fr;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-areas:
          "red green blue";
}

@media screen and (max-width:700px) {
  .xWrapper {
    grid-template-columns:0 2fr 1fr;
    grid-template-areas:
        "red green blue";
  }
  .red {
    width:0;
    overflow:hidden;
  }
}

<div class="xWrapper animate">
  <div class="red">
      Red. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur
      cursus velit, sed cursus erat. Integer scelerisque odio a consectetur laoreet.
      Nam at ante ultricies, volutpat risus vitae, interdum risus.
  </div>

  <div class="green">
      Green. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur
      cursus velit, sed cursus erat. Integer scelerisque odio a consectetur laoreet.
      Nam at ante ultricies, volutpat risus vitae, interdum risus. Suspendisse
      sollicitudin odio a felis ornare, nec elementum velit convallis.
  </div>

  <div class="blue">
      Blue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur
      cursus velit, sed cursus erat. Integer scelerisque odio a consectetur laoreet.
      Nam at ante ultricies, volutpat risus vitae, interdum risus. Suspendisse
      sollicitudin odio a felis ornare, nec elementum velit convallis. Vestibulum
      at imperdiet lorem. Sed consectetur pretium nisi, malesuada ullamcorper nibh viverra
      vel.
  </div>
</div>

我可以看到绿色和蓝色列上的平滑过渡会改变大小，但是当红色列消失时，它似乎会突然关闭，如http://www.cssdesk.com/xRDXJ

我希望红色的列动画为width：0 有没有办法做到这一点？

谢谢 安倍