使用网格将不同大小的元素放置在一个方形容器中

Question

我试图在固定大小的容器中放置8个固定大小的元素。 元素应具有以下尺寸： [ 其中5个元素的尺寸为300x300， 其中1个元素的尺寸为600x600， 其中1个元素的尺寸为300x600 ] 容器应具有以下尺寸： [ 1200x900 ]

我正在使用“网格”来放置元素，并且我认为使用“网格模板区域”来定义区域可以解决问题。这是一种工作方式，但并非完全如我所愿（并非所有元素都在显示）。

链接到我的codepen演示-> https://codepen.io/gabs97/pen/YBrqOK

<section id="elements-container">
<div class="element blue"></div>
<div class="element blue"></div>
<div class="element blue"></div>
<div class="element-all red"></div>
<div class="elemen blue"></div>
<div class="element-main purple"></div>
<div class="element-forum green"></div>
<div class="element blue"></div>

#elements-container {
  height: 900px;
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "element element element element-all"
    "element element-main element-main element-forum"
    "element element-main element-main element-forum";
  .element {
    background-color: blue;
    width: 300px;
    height: 300px;
    grid-area: element;
  }
  .element-all {
    background-color: red;
    width: 300px;
    height: 300px;
    grid-area: element-all;
  }
  .element-main {
    background-color: purple;
    width: 600px;
    height: 600px;
    grid-area: element-main;

   }
   .element-forum {
     background-color: green;
     width: 300px;
     height: 600px;
     grid-area: element-forum;
   }
}

Grid template container这就是我最终希望看到的结果。