title: Sticky header on css grid
body: <p>I've got a nifty responsive css template using css grids and I'd like to make the header of this responsive css grid sticky, but because of the way the header and nav is designed, I can't get it to use fixed positioning.</p>
  
  <p>is there a better way of doing this with some grid property I might not have seen yet?</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>* {
    margin: 0;
    padding: 0;
  }
  
  body {
    display: grid;
    font-family: sans-serif;
  }
  
  a {
    text-decoration: none;
    color: white;
  }
  
  header,
  nav {
    background: blue;
    color: #fff;
    position: fixed;
  }
  
  nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  nav span {
    margin-right: auto;
  }
  
  header {
    display: none;
  }
  
  aside {
    background: lightgreen;
  }
  
  main {
    background: pink;
  }
  
  
  /* mobile  */
  
  @media (max-width: 767px) {
    body {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
    }
    nav,
    aside,
    main {
      grid-column: 1 / 1;
      padding: 0 15px;
    }
  }
  
  
  /* tablets */
  
  @media (min-width: 768px) {
    body {
      grid-template-columns: 275px 1fr;
      grid-template-rows: 1fr 1fr;
    }
    nav {
      grid-column: 1 / 4;
      grid-row: 1;
      height: 50px;
      grid-row: 1;
    }
    aside {
      grid-column: 1;
    }
    main {
      grid-column: 2;
    }
    nav,
    aside,
    main {
      padding: 0 15px;
    }
  }
  
  
  /* desktops */
  
  @media (min-width: 992px) {
    body {
      grid-template-columns: 10% 275px 1fr 10%;
      grid-template-rows: 1fr 1fr;
    }
    header {
      display: block;
      grid-column: 1 / -1;
      grid-row: 1;
    }
    nav {
      grid-column: 2 / 4;
      grid-row: 1;
    }
    aside {
      grid-column: 2 / 3;
    }
    main {
      grid-column: 3 / 4;
    }
  }
  
  
  /* xl desktops */
  
  @media (min-width: 1920px) {
    body {
      grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
      grid-template-rows: 1fr 1fr;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;&lt;/header&gt;
  &lt;nav&gt;
    &lt;span&gt;Logo&lt;/span&gt;
    &lt;a href="#"&gt;login&lt;/a&gt;
  &lt;/nav&gt;
  &lt;aside&gt;aside&lt;/aside&gt;
  &lt;main&gt;main&lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/90kotz8d/3/" rel="noreferrer">https://jsfiddle.net/90kotz8d/3/</a></p>