title: Make row stretch across all columns in CSS Grid
body: <p>I've been having trouble getting my nav to stretch across my columns completely, despite the fact that I've specified what columns I wanted the nav to stretch over, if you could take a look at my code and point out my error that would be awesome.</p>
  
  <p>Here's an image of the HTML file in browser</p>
  
  <p><img src="https://i.stack.imgur.com/iZijB.jpg" alt="Web-Example"></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>body {
    margin: 0;
    padding: 0;
  }
  
  .container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 50px auto;
  }
  
  .mainnav {
    grid-column: 1 / 2;
    grid-row: 1 / 1;
    background-color: #5eccc0;
  }
  
  .navul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .navli {
    float: left;
    text-align: center;
  }
  
  .navli a {
    display: block;
    text-decoration: none;
  }
  
  main {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
    background-color: #ffff77;
  }
  
  .sidebar {
    background-color: #b200a4;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;nav class="mainnav"&gt;
      &lt;ul class="navul"&gt;
        &lt;li class="navli"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navli"&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navli"&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;main&gt;
      &lt;h1&gt;Html Example Header&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim congue sapien, faucibus ultricies metus pulvinar nec. Vestibulum vitae mattis nibh. Sed nibh mauris, rhoncus id urna rutrum, dignissim luctus ligula. Pellentesque quis nulla
        eget elit egestas dignissim. Vivamus blandit congue sem. Fusce eget condimentum massa, sit amet convallis erat. Proin in justo ac nisl vulputate vulputate id et sem. Donec consectetur mollis mi, ut tempor sem scelerisque in. Nulla facilisi.
        &lt;br&gt;
        &lt;br&gt; Nunc tempus lectus mi, ac posuere metus elementum vitae. Praesent non elit at lacus bibendum ornare. Sed pretium ultricies justo, fringilla sagittis ligula aliquam quis. Aenean aliquet euismod fringilla. Curabitur sit amet pharetra nisi. Donec
        ac suscipit arcu, ac accumsan tortor. Ut facilisis egestas augue, laoreet tempus ligula. Morbi pulvinar arcu et lectus tincidunt condimentum. Mauris ut nisl at lectus condimentum suscipit.
        &lt;br&gt;
        &lt;br&gt; Vestibulum vel magna id lacus ullamcorper pretium vitae a eros. Sed vestibulum metus eu justo volutpat, nec facilisis lacus tempus. Nulla at maximus sapien, eget finibus massa. Phasellus pulvinar iaculis augue rhoncus aliquet. Vestibulum vitae
        massa bibendum, pretium justo ultrices, fermentum turpis. Vestibulum id scelerisque lacus. In mattis viverra justo, vel suscipit enim egestas ac. Ut fringilla lobortis nulla, vitae tempus nibh fermentum ac. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Phasellus ac urna vitae arcu varius suscipit. Pellentesque nec nunc ligula. Sed sollicitudin pretium iaculis. Aliquam ut ex molestie, vulputate lacus vitae, dapibus lorem. Phasellus nec bibendum tortor.
      &lt;/p&gt;
    &lt;/main&gt;
    &lt;div class="sidebar"&gt;
      &lt;h2&gt;Sidebar Example&lt;/h2&gt;
      &lt;ul&gt;
        &lt;li&gt;List item 1&lt;/li&gt;
        &lt;li&gt;List item 2&lt;/li&gt;
        &lt;li&gt;List item 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>