title: Can't achieve grid layout with CSS grid
body: <p>In trying to learn more about CSS grid, I am trying to create some different grid layouts.  The one I am trying to create is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/pPF80.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pPF80.jpg" alt="grid layout"></a></p>
  
  <p>Here is one step of this:</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>.wrapper {
      display: grid;
      grid-gap: 15px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(8, 1fr);
  }
  
  .wrapper .first_box {
      grid-column-start: 2;
      grid-column-end: 4;
  
      grid-row-start: 1;
      grid-row-end: 7;
  }
  
  .wrapper .second_box {
      grid-column-start: 1;
      grid-column-end: 2;
  
      grid-row-start: 1;
      grid-row-end: 4;
  
  }
  
  .wrapper .third_box {
      grid-column-start: 4;
      grid-column-end: 5;
  
      grid-row-start: 1;
      grid-row-end: 4;
  }
  
  .wrapper .fourth_box {
      grid-column-start: 1;
      grid-column-end: 2;
  }
  
  .wrapper .fifth_box {
      grid-column-start: 4;
      grid-column-end: 5;
  }
  
  .wrapper div {
      border: 2px solid rgb(233,171,88);
      border-radius: 5px;
      background-color: rgba(233,171,88,.5);
      padding: 1em;
      color: #d9480f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="first_box"&gt;
    First Box
    &lt;/div&gt;
    
     &lt;div class="second_box"&gt;
    Second Box
    &lt;/div&gt;
    
     &lt;div class="third_box"&gt;
      Third Box
    &lt;/div&gt;
    
     &lt;div class="fourth_box"&gt;
    Fourth Box
    &lt;/div&gt;
    
      &lt;div class="fifth_box"&gt;
    Fifth Box
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>At this point, the first two boxes look correct.  The problem is when I try to set the rows for the bottom left box and the bottom right box.  For both of these boxes, I have <code>grid-row-start</code> set to where the upper left and upper right boxes end and I have <code>grid-row-end</code> set to where the big box ends.  This causes the boxes to go back to their default size:</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>.wrapper {
      display: grid;
      grid-gap: 15px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(8, 1fr);
  }
  
  .wrapper .first_box {
      grid-column-start: 2;
      grid-column-end: 4;
  
      grid-row-start: 1;
      grid-row-end: 7;
  }
  
  .wrapper .second_box {
      grid-column-start: 1;
      grid-column-end: 2;
  
      grid-row-start: 1;
      grid-row-end: 4;
  
  }
  
  .wrapper .third_box {
      grid-column-start: 4;
      grid-column-end: 5;
  
      grid-row-start: 1;
      grid-row-end: 4;
  }
  
  .wrapper .fourth_box {
      grid-column-start: 1;
      grid-column-end: 2;
      
      grid-row-start: 4;
      grid-row-end: 7;
  }
  
  .wrapper .fifth_box {
    
      grid-column-start: 4;
      grid-column-end: 5;
      
      grid-row-start: 4;
      grid-row-end: 7;
   
  }
  
  .wrapper div {
      border: 2px solid rgb(233,171,88);
      border-radius: 5px;
      background-color: rgba(233,171,88,.5);
      padding: 1em;
      color: #d9480f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="first_box"&gt;
    First Box
    &lt;/div&gt;
    
     &lt;div class="second_box"&gt;
    Second Box
    &lt;/div&gt;
    
     &lt;div class="third_box"&gt;
      Third Box
    &lt;/div&gt;
    
     &lt;div class="fourth_box"&gt;
    Fourth Box
    &lt;/div&gt;
    
      &lt;div class="fifth_box"&gt;
    Fifth Box
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm not sure why this happens. I would appreciate if someone could help my understand why this happens.</p>