title: Css Grid item stick to top on scroll
body: <p>I have a layout with 3 columns when large then for mobile i resize it to each row the full width of the grid on mobile. When large I need column 1 and 3 to be sticky to the top when column 2 is scrolling. I made an example <a href="https://codesandbox.io/s/thirsty-kilby-ulzfl?file=/src/App.js" rel="nofollow noreferrer">here</a> on codesandbox.</p>
  <p>Here is also the css from the sandbox:</p>
  <pre><code>.App {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: &quot;col1 col2 col3&quot;;
  }
  
  .column1 {
    background-color: aquamarine;
    grid-area: col1;
  }
  
  .column2 {
    background-color: rebeccapurple;
    grid-area: col2;
  }
  
  .column3 {
    background-color: orange;
    grid-area: col3;
  }
  
  @media only screen and (max-width: 800px) {
    .App {
      color: red;
      grid-template-areas:
        &quot;col1 col1 col1&quot;
        &quot;col3 col3 col3&quot;
        &quot;col2 col2 col2&quot;;
    }
  }
  </code></pre>
  <p>I've tried making position sticky on <code>.column1</code> but it still didnt stick to the top. Think of .column1 and .column3 as a sidebar filter.  Also when on mobile dont make the columns sticky to the top</p>