title: How to create grid table 4x3 where two items will have height 50%
body: <p>I want to create a grid table like this (two items have a height 50%)</p>
  
  <p><img src="https://i.stack.imgur.com/DM5Mn.jpg" alt="example what I need"></p>
  
  <p>My <code>HTML</code> and <code>Sass</code> code enow is looking like:</p>
  
  <pre><code>&lt;div class="grid"&gt;
     &lt;div class="grid__list"&gt;
            &lt;div class="grid__item"&gt;1&lt;/div&gt;
            &lt;div class="grid__item"&gt;2&lt;/div&gt;
            &lt;div class="grid__item"&gt;3&lt;/div&gt;
            &lt;div class="grid__item"&gt;4&lt;/div&gt; 
            &lt;div class="grid__item"&gt;5&lt;/div&gt;
            &lt;div class="grid__item"&gt;6&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>.grid
      &amp;__list
          display: grid
          grid-template-columns: repeat(3, 1fr)
          grid-template-rows: repeat(3, 1fr)
          grid-column-gap: 20px
          grid-row-gap: 20px
          min-height: 1000px
      &amp;__item
          border-radius: 5px
          background: blue
          &amp;:nth-child(1)
              grid-area: 1 / 1 / 4 / 2
          &amp;:nth-child(2)
              grid-area: 1 / 3 / 2 / 4
          &amp;:nth-child(3)
              grid-area: 2 / 3 / 3 / 4
          &amp;:nth-child(4)
              grid-area: 3 / 3 / 4 / 4
          &amp;:nth-child(5)
              grid-area: 1 / 2 / 3 / 3
          &amp;:nth-child(6)
              grid-area: 3 / 2 / 4 / 3
  </code></pre>