title: Using CSS transitions in CSS Grid Layout
body: <p>I am trying to get my sticky header to have a transition effect so it eases in rather than just a snap movement.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here's my a working version:</p>
  
  <p><a href="http://codepen.io/juanmata/pen/RVMbmr" rel="noreferrer">http://codepen.io/juanmata/pen/RVMbmr</a></p>
  
  <p>Basically the following code adds the class tiny to my wrapper class, this works fine.</p>
  
  <pre><code>$(window).on('load', function() {
      $(window).on("scroll touchmove", function () {
          $('.wrapper').toggleClass('tiny', $(document).scrollTop() &gt; 0);
      });
  });
  </code></pre>
  
  <p>Here's the CSS part:</p>
  
  <pre><code>.wrapper {
      grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
      -o-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
  }
  .tiny {
      grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
  }
  </code></pre>
  
  <p>So the header does shrink as it should but there is no animation, have I missed something or does transitions simply not work with grid?</p>
  
  <p>Here's a link to the css-grid docs.</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on('load', function() {
    $(window).on("scroll touchmove", function() {
      $('.wrapper').toggleClass('tiny', $(document).scrollTop() &gt; 0);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   margin:0;
   padding:0;
  }
  
  .wrapper {
   display: grid;
   grid-gap: 0px;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
   grid-template-areas:
    "head head head head"
    "main main main main"
    "leader leader leader leader"
    "foot foot foot foot";
   background-color: #fff;
   color: #444;
  }
  .tiny {
   grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
  }
  .box {
   background-color: #444;
   color: #fff;
   border-radius: 5px;
   font-size: 150%;
  }
  .box .box {
   background-color: lightcoral;
  }
  
  .head {
   grid-area: head;
   background-color: #999;
   z-index: 2;
   display: grid;
   grid-gap: 0px;
   grid-template-columns: 20% 1fr;
   -o-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   position: sticky;
   top: 0;
  }
  
  .logo{
          height: inherit;
          grid-column: 1;
          grid-row: 1;
          background-color:red;
          position: relative;
          overflow: hidden;
      }
  .logo img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: block;
          max-width: 100%;
          height: auto;
      }
  .main {
   grid-area: main;
   /* CSS Grid */
   z-index: 1;
   grid-column: head-start / head-end;
   grid-row: head-start / leader-start;
   background-color: red;
  }
  .leader {
   grid-area: leader;
   z-index:1;
   display: grid;
   grid-gap: 0px;
   grid-template-columns: repeat(4, 1fr  );
  }
  .foot {
   grid-area: foot;
   z-index:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="box head"&gt;
      &lt;div class="box logo"&gt;
        &lt;a href="#"&gt;&lt;img src="https://unsplash.it/200/300/?random" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="box nav"&gt;nav&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="box main"&gt;main&lt;/div&gt;
    &lt;div class="box leader"&gt;
      &lt;div class="box leader-1"&gt;1&lt;/div&gt;
      &lt;div class="box leader-2"&gt;2&lt;/div&gt;
      &lt;div class="box leader-3"&gt;3&lt;/div&gt;
      &lt;div class="box leader-4"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="box foot"&gt;foot&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>