title: sticky position on css grid items
body: <p>I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it.</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>main {
    display: grid;
    grid-template-columns: 20% 55% 25%;
    grid-template-rows: 55px 1fr;
  }
  
  nav {
    background: blue;
    grid-row: 1;
    grid-column: 1 / 4;
  }
  
  section {
    background: grey;
    grid-column: 1 / 2;
    grid-row: 2;
    position: sticky;
    top: 0;
    left: 0;
  }
  
  article {
    background: yellow;
    grid-column: 2 / 4;
  }
  
  article p {
    padding-bottom: 1500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;nav&gt;&lt;/nav&gt;
    &lt;section&gt;
      hi
    &lt;/section&gt;
    &lt;article&gt;
      &lt;p&gt;hi&lt;/p&gt;
    &lt;/article&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>