title: CSS grid - Animating content placement
body: <p>I have a 2x2 grid that contains three divs: <code>#blue</code> (2x1), <code>#red</code> (1x1) and <code>#yellow</code> (1x1) (<strong>see <a href="https://jsfiddle.net/mmerchant/y1qsg5eu/42/" rel="nofollow noreferrer">JSFiddle</a></strong>). This is what the grid looks like initially:</p>
  <p><a href="https://i.stack.imgur.com/W8Vfi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W8Vfi.png" alt="enter image description here" /></a></p>
  <p><strong>NOTE: <code>#red</code> is overlapped by <code>#blue</code> and hence not visible.</strong> To make it visible, the user must click <code>Show</code>. This is what the grid looks like after <code>Show</code> has been clicked:</p>
  <p><a href="https://i.stack.imgur.com/bGQiu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bGQiu.png" alt="enter image description here" /></a></p>
  <p>In my current setup, clicking the <code>Show</code> button adds the <code>.expanded</code> class to <code>#red</code>, which changes the line placement of <code>#red</code> from <code>grid-column: 1/2</code> to <code>grid-column: 1/span2</code> and makes <code>#red</code> visible.
  This works fine, however, I don't like the abruptness of the change and would like to give <code>#red</code> the appearance of sliding out from under <code>#blue</code> when <code>Show</code> is clicked. The problem is that since <code>grid-column</code> has a discrete animation type, it cannot be tween-transitioned in the way that a continuous property like <code>width</code> can.</p>
  <p><strong>My attempt at a work-around:</strong></p>
  <p>I tried specifying a <code>width</code> property for <code>#red</code>. It is initially set to <code>100px</code> and transitioned to <code>200px</code> when <code>Show</code> is clicked.</p>
  <p>This almost gives me the desired result in that <code>#red</code> slides smoothly when <code>Show</code> is clicked <em><strong>but not when <code>Hide</code> is clicked</strong></em>. My guess is that <code>grid-column</code> does not wait for the transition to complete and I also don't like having to hardcode the values of <code>width</code>.</p>
  <p>I also tried using <code>translateX</code> with transition but once again <code>grid-column</code> is set before the transition finishes.</p>
  <p>Is there a solution to this problem that uses pure CSS? (I don't mind using JS but it is a last resort and do not want to use anything that involves setTimeout or jQuery.)</p>