title: Fixed header in CSS Grid
body: <p>I've just begun fiddling with the CSS Grid and I'm curious as to how to create a fixed header. Should I create a two row grid where row one is the header and row two is another grid for the content? Or is there an easier way to approach this? </p>
  
  <p>I've added height to the divs within the grid to enable scrolling.</p>
  
  <p>Here is the HTML/CSS I've set up for testing:</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>html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed,
      figure, figcaption, footer, header, hgroup,
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
      }
      /* HTML5 display-role reset for older browsers */
      article, aside, details, figcaption, figure,
      footer, header, hgroup, menu, nav, section {
       display: block;
      }
      body {
       line-height: 1;
      }
      ol, ul {
       list-style: none;
      }
      blockquote, q {
       quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
       content: '';
       content: none;
      }
      table {
       border-collapse: collapse;
       border-spacing: 0;
      }
      
      /* DEFAULTS */
  
      body {
        color: white;
      }
      
      /* SETTING UP THE GRID LAYOUT */
      
      .wrapper {
        display: grid;
        grid-template-columns: repeat(12, [col-start] 1fr);
        grid-template-rows: 10vh 1fr;
      }
      
      .header {
        grid-column: col-start / span 12;
        background-color: black;
      }
      
      .jumbotron {
        grid-column: col-start / span 12;
        height: 30vh;
        background-color: yellow;
      }
      
      .content-one-left {
        grid-column: col-start / span 6;
        height: 30vh;
        background-color: red;
      }
      
      .content-one-right {
        grid-column: col-start 7 / span 6;
        height: 30vh;
        background-color: blue;
      }
      
      .content-two-left {
        grid-column: col-start / span 6;
        height: 30vh;
        background-color: blue;
      }
      
      .content-two-right {
        grid-column: col-start 7 / span 6;
        height: 30vh;
        background-color: red;
      }
      
      .footer {
        grid-column: col-start / span 12;
        height: 10vh;
        background-color: black;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  
    &lt;div class="header"&gt;
      &lt;p&gt; Header &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="jumbotron"&gt;
      &lt;p&gt; Jumbotron &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="content-one-left"&gt;
      &lt;p&gt; Content 1 Left &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="content-one-right"&gt;
      &lt;p&gt; Content 1 Right &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="content-two-left"&gt;
      &lt;p&gt; Content 2 Left &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="content-two-right"&gt;
      &lt;p&gt; Content 2 Right &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="footer"&gt;
      &lt;p&gt; Footer &lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>