.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 100px 200px 300px;
}

{/collapse-item}

<div class="grid-container">
 <div class="item1">Item 1</div>
 <div class="item2">Item 2</div>
 <div class="item3">Item 3</div>
 <div class="item4">Item 4</div>
 <div class="item5">Item 5</div>
 <div class="item6">Item 6</div>
 <div class="item7">Item 7</div>
 <div class="item8">Item 8</div>
 <div class="item9">Item 9</div>
</div>

{/collapse-item}

.item1 {
 grid-column: 1 / 3;
 grid-row: 1 / 2;
}
.item2 {
 grid-column: 3;
 grid-row: 1 / 3;
}
.item3 {
 grid-column: 1;
 grid-row: 2 / 4;
}
.item4 {
 grid-column: 2;
 grid-row: 2;
}
.item5 {
 grid-column: 2 / 4;
 grid-row: 3;
}
.item6 {
 grid-column: 1 / 3;
 grid-row: 4;
}
.item7 {
 grid-column: 3 / 4;
 grid-row: 4 / 5;
}
.item8 {
 grid-column: 2 / 4;
 grid-row: 5;
}
.item9 {
 grid-column: 1 / 4;
 grid-row: 6;
}

{/collapse-item}

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 100px 200px 300px;
 grid-gap: 20px;
}

{/collapse-item}

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 100px 200px 300px;
 grid-gap: 20px;
 grid-auto-rows: 100px;
 grid-auto-columns: 100px;
}

{/collapse-item}