title: How to move the next sibling to the next row in CSS Grid?
body: <p>I have this <code>styled-components</code> header in my <code>React</code> app. It has a <code>position: fixed</code> styling. I want to keep the sibling(s) of this header out of it's grid cell. I have tried to specify an empty grid cell with <code>grid-template-areas</code> as follows:</p>
  
  <pre><code>#__next {
      display: grid;
      grid-template-columns: 100vw;
  
      grid-template-rows: auto 150vw auto;
  
      grid-template-areas: 
          "." 
          "page" 
          "footer";
    }
  </code></pre>
  
  <p>My page that is nested inside this <code>#__next</code> div (the root element) looks as follows:</p>
  
  <pre><code>"use strict";
  
  import Header from "../components/Header/Header";
  
  export default function Home(): JSX.Element {
    console.log("Page render");
    return (
      &lt;&gt;
        &lt;Header /&gt;
        &lt;h1&gt;Page&lt;/h1&gt;
        &lt;h2&gt;Welcome&lt;/h2&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>This <code>h1</code> element is just an example. When I run this, the empty grid cell specified with <code>.</code> in <code>grid-template-areas</code> is just ignored and the <code>h1</code> is placed inside the top grid cell anyway. </p>
  
  <p><strong>How can I solve this and why is CSS ignoring my <code>.</code> empty grid cell specified in <code>grid-template-areas</code>?</strong></p>
  
  <ul>
  <li>I want to avoid having to specify the <code>grid-area</code> on the page element.</li>
  <li>I can't give the next sibling a <code>margin-top</code> because that won't move it to the next grid row.</li>
  <li>I want to keep the header height variable isolated to the Header component styling. </li>
  </ul>
  
  <p>A possible solution is to place a <code>div</code> adjacent to the header to take up this grid space, but I think it would hurt my accessibility.</p>
  
  <p>I'm looking for a way to 'push' the next sibling on the page into the next grid row, preferably by 'filling' this top grid cell or getting the empty grid cell working so that the page flow is not disrupted.</p>