title: How can I move elements on a css grid?
body: <p>I am trying to figure out how to position elements using css grid. I'm using firefox and I can see that my areas are defined properly, but when I try to move some sample stuff around they aren't moving.</p>
  <p>I've read and tried a bunch of different things but I guess I'm implementing the solutions wrong?</p>
  <p>I'm trying to have stuff side-by-side. Like content in section1 goes to sect1 and content in sect2 goes to section2 respectively on the page.</p>
  <p>This is the html I want to move using css grids:</p>
  <pre><code>    &lt;div class=&quot;wrapper&quot;&gt;
  
      &lt;header class=&quot;header&quot;&gt;
          &lt;!--&lt;img class=&quot;logo&quot; src=&quot;imgs/logo.png&quot; alt=&quot;logo&quot;&gt; --&gt;
          &lt;h1&gt;LOGO&lt;/h1&gt;
          &lt;nav&gt;
              &lt;ul class=&quot;nav_links&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tutorials&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;button class=&quot;nav_buttons&quot;&gt;Login&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  
      &lt;main&gt;
          &lt;h2&gt;TEXT HERE&lt;/h2&gt;
          &lt;div id=&quot;sect1&quot;&gt;
              &lt;P&gt;MOVE ME/KEEP ME ON THE LEFT SIDE OF SCREEN&lt;/P&gt;
          &lt;/div&gt;
          &lt;div id=&quot;sect2&quot;&gt;
              &lt;p&gt;MOVE ME/KEEP ME ON THE RIGHT SIDE OF SCREEN&lt;/p&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  
      &lt;footer class=&quot;foot&quot;&gt;
      &lt;/footer&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>This is my css file:</p>
  <pre><code>body {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  background-color: #ededed;
  margin: 0;
  padding: 0;
  }
  
  .wrapper {
      display: grid;
      height: 100vh;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 80px 5fr 1fr;
      grid-template-areas: 
          &quot;header header&quot;
          &quot;sect1 sect2&quot;
          &quot;foot foot&quot;;
  }
  
  .wrapper .header {
      grid-area: header;
  }
  
  .wrapper main {
      grid-column: 1 / 3;
  }
  
  .wrapper main #sect1 {
      grid-area: sect1;
      background-color: lightcyan;
  }
  
  .wrapper main #sect2 {
      grid-area: sect2;
      background-color: lightpink;
  }
  
  .foot {
      grid-area: foot;
      background-color: rgb(255, 0, 0);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/G4tvp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4tvp.png" alt="Firefox grid view" /></a></p>