title: How to create a sticky header with CSS-grid?
body: <p>I would like to make my header sticky when scrolling using CSS grid. </p>
  
  <p>I have tried the solution proposed here: <a href="https://stackoverflow.com/questions/49058819/sticky-header-on-css-grid">Sticky header on css grid</a>
  Meaning: </p>
  
  <pre><code>position: sticky; 
  top:0;
  </code></pre>
  
  <p>However it does not work...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    display: grid;
    grid-template-areas: "header" "middle" "footer";
    grid-template-rows: auto 1fr auto;
    height: 100vh;
  }
  
  
  /* Header */
  
  header {
    order: 1;
    grid-area: header;
    display: grid;
    grid-gap: 100px;
    grid-template-areas: "logo nav";
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    position: sticky;
    top: 0;
  }
  
  nav {
    display: grid;
    grid-area: nav;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  
  /* Middle */
  
  .middle {
    order: 2;
    grid-area: middle;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
  }
  
  .middle&gt;* {
    grid-column: 2 / -2;
  }
  
  
  /* Footer */
  
  footer {
    order: 3;
    grid-area: footer;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  
  .footer-links {
    display: grid;
    grid-column: 2 /-2;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="wrapper"&gt;
  
      &lt;!-- Header --&gt;
      &lt;header&gt;
        &lt;a href="./index.html" title="Welcome" class="logo"&gt;&lt;img src="img/logo_jaeaess_glitch.png" alt="Logo of the VJ Jääß (Jess de Jesus)" style="width:42px;height:42px"&gt;&lt;/a&gt;
        &lt;nav&gt;
          &lt;a href="./index.html" title="Welcome" class="welcome active"&gt;Welcome&lt;/a&gt;
          &lt;a href="./about.html" title="About" class="about"&gt;About&lt;/a&gt;
          &lt;a href="./artwork.html" title="Art Work" class="artwork"&gt;Art Work&lt;/a&gt;
          &lt;a href="./events.html" title="Events" class="events"&gt;Events&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;!-- Middle --&gt;
      &lt;section class="middle"&gt;
      &lt;/section&gt;
  
      &lt;footer&gt;
        &lt;div class="footer-links"&gt;
          &lt;a href="https://www.instagram.com/jaeaess/" target="_blank"&gt;Instagram&lt;/a&gt;
          &lt;p&gt;&amp;copy; 2019 Jääß&lt;/p&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything displays as I want it to, except that the header scroll down instead of staying fix...</p>
  
  <p>(For those who wonder, I put the order just to move it within a media query at a later stage of development)</p>
  
  <p>Thank you for your answers!</p>