title: Footer at bottom with css grid? Can't figure it out?
body: <p>I have looked at other tutorials on how to make the footer stick to the bottom with css grid when there is little content. But i can't figure it out.</p>
  
  <p>If you could help, that would be great. I'm learning css grid and i've spent days on and off trying to figure it out.</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;
    color: #ffffff;
    font-family: helvetica;
  }
  
  body {
    background-color: #191919;
  }
  
  html body {
    height: 100%;
    width: 100%;
  }
  
  .grid {
    min-height: 100%;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 50px 1fr auto;
    grid-row-gap: 10px;
    grid-template-areas:
    "header header header header"
    ". main main ."
    "footer footer footer footer";
  }
  /*Header*/
  
  .header {
    grid-area: header;
    background-color: red;
    display: grid;
    position: fixed;
    width: 100%;
    grid-template-columns: 40% 60%;
    grid-template-areas:
    "title navigation"
  }
  
  .title {
    grid-area: title;
    text-align: center;
  }
  
  .navigation {
    grid-area: navigation;
  }
  
  .title .navigation {
  }
  
  /*Main*/
  
  .main {
    margin-top: 50px;
    grid-area: main;
    background-color: #323232;
    border-radius: 10px;
  }
  
  /*Footer*/
  
  .footer {
    grid-area: footer;
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="./css/style.css"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt;Mortrix&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
        &lt;div class="grid"&gt;
  
          &lt;!-- Header --&gt;
  
          &lt;div class="header"&gt;
  
            &lt;div class="title"&gt; &lt;h1&gt;Mortrix&lt;/h1&gt;&lt;/div&gt;
  
            &lt;div class="navigation"&gt;Navigation&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;!-- Main --&gt;
  
          &lt;div class="main"&gt;
  
            This is some content
  
          &lt;/div&gt;
  
          &lt;!-- Footer --&gt;
  
          &lt;div class="footer"&gt;Footer
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know this question have already been asked, but i am looking a for a fix for my own code. Sorry if i missed something obvious.</p>