title: Changing div heights using CSS grid
body: <p>I'm a student trying to understand css grids. How do I change the size of a specific div column or row without changing them all and insert elements such as pictures etc into the grid? </p>
  
  <p>I have attempted it here: <a href="https://codepen.io/lukeheald/pen/bYQNgj" rel="nofollow noreferrer">https://codepen.io/lukeheald/pen/bYQNgj</a></p>
  
  <p>If I target the specific div I want to adjust it changes the height of all of them. </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{
          font-family: 'Anton', sans-serif;
          margin: 0;
      }
      
      /* Main sidebar style, dark background and transition.*/
      
      #sidebar{
          background: black;
          width: 200px;
          height: 100%;
          display: block;
          position: absolute;
          left: -200px;
          top: 0px;
          transition: left 0.3s linear;
      }
      
      /* Sidebar visibile transition and position*/
      
      #sidebar.visible{
          left: 0px;
          transition: left 0.3s linear;
      }
      
      /* ul list styles*/
      
      ul{
          margin: 0px;
          padding: 0px;
      }
      
      /* list styles*/
      
       ul li{
          list-style: none;
      }
      
      /*  link styles such as underlining and color etc.*/
      
      ul li a{
          background:#1C1E1F;
          color: #fff;
          border-bottom: 1px solid #111;
          display: block;
          width: 180px;
          padding: 10px; 
          text-decoration: none;
      }
      
      /* Sidebar button styles for lines.*/
      
      #sidebar-btn{
          display: inline-block;
          vertical-align: middle;
          width:50px;
          height: 15px;
          cursor: pointer;
          margin: 20px;
          position: absolute;
          top: 0px;
          right: -80px;
              
      }
      
      /* Edit physical lines of button.*/
      
      #sidebar-btn span{
          height: 5px;
          background: black;
          margin-bottom: 5px;
          display: block;
      }
      
      /* changing 2 line to have smaller width than top.*/
      
      #sidebar-btn span:nth-child(2){
          width: 75%;
      }
      
      /* changing third line to be smaller than 2nd line */
      
      #sidebar-btn span:nth-child(3){
          width: 50%;
      }
      
      
      /*Grid start*/
      
      .grid{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
          grid-template-areas: 
              "title title"
              "image1 image1"
              "text1 text1"
              "image2 image2"
              "text2 text2"
              "footer footer";
      }
      
      .title {
          grid-area: title;
          justify-self: center;
          background-color: white;
          
      }
      
      #hero{
        height: 300px;
          
      }
      
      .image1 {
          grid-area: image1;
          background-color: blue;
      }
      
      .text1 {
          grid-area: text1;
          background-color: green;
      }
      
      .image2 {
          grid-area: image2;
          background-color: orange;
      }
      
      .text2 {
          grid-area: text2;
          background-color: pink;
      }
      
      .footer {
          grid-area: footer;
          background-color: purple;
      }
      
      
      
      @media screen and (min-width: 736px)
      {
          .grid{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr 1fr 1fr;
          grid-template-areas: 
              "title title"
              "image1 text1"
              "image2 text2"
              "footer footer";
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Grid Practice&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
           &lt;link rel="stylesheet" type="text/css" href="css/animate.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"&gt;
          &lt;script src="jquery/jquery.js"&gt;&lt;/script&gt;
      
      &lt;/head&gt;
      
      &lt;body&gt;
      
      &lt;!–– Sidebar Start ––&gt;
          
          &lt;div id="sidebar"&gt;
      
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;DEMO&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;SOCIAL MEDIA&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      
              &lt;div id="sidebar-btn"&gt;
                  &lt;span&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          
      &lt;!–– Sidebar End ––&gt;
          
          
          &lt;!–– hero ––&gt;
              &lt;div class="grid"&gt;
              &lt;div id="hero" class="title"&gt;Hero
              &lt;/div&gt;
              
                  
                  
                  
                  
                  
                  
                  
              &lt;div class="image1"&gt;image1&lt;/div&gt;
              &lt;div class="text1"&gt;text1&lt;/div&gt;
              &lt;div class="image2"&gt;image2&lt;/div&gt;
              &lt;div class="text2"&gt;text2&lt;/div&gt;
              &lt;div class="footer"&gt;footer&lt;/div&gt;
          &lt;/div&gt;
      
          
          
          
      &lt;/body&gt;
  
  
  
      </code></pre>
  </div>
  </div>
  </p>