SOURCE

9:
<div class="container g--9">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
  <div class="item__3">
  </div>
  <div class="item__4">
  </div>
  <div class="item__5">
  </div>
  <div class="item__6">
  </div>
  <div class="item__7">
  </div>
  <div class="item__8">
  </div>
  <div class="item__9">
  </div>
</div>
8:
<div class="container g--8">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
  <div class="item__3">
  </div>
  <div class="item__4">
  </div>
  <div class="item__5">
  </div>
  <div class="item__6">
  </div>
  <div class="item__7">
  </div>
  <div class="item__8">
  </div>
</div>
7:
<div class="container g--7">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
  <div class="item__3">
  </div>
  <div class="item__4">
  </div>
  <div class="item__5">
  </div>
  <div class="item__6">
  </div>
  <div class="item__7">
  </div>
</div>
6:
<div class="container g--6">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
  <div class="item__3">
  </div>
  <div class="item__4">
  </div>
  <div class="item__5">
  </div>
  <div class="item__6">
  </div>
</div>
5:
<div class="container g--5">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
  <div class="item__3">
  </div>
  <div class="item__4">
  </div>
  <div class="item__5">
  </div>
</div>
4:
<div class="container g--4">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
  <div class="item__3">
  </div>
  <div class="item__4">
  </div>
</div>
3:
<div class="container g--3">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
  <div class="item__3">
  </div>
</div>
2:
<div class="container g--2">
  <div class="item__1">
  </div>
  <div class="item__2">
  </div>
</div>
1:
<div class="container g--1">
  <div class="item__1">
  </div>
</div>

.container {
  width: 500px;
  height: 500px;
  margin: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

@for $i from 1 through 9 {
  .item__#{$i} {
    background-color: #111111 * $i;
    grid-area: i#{$i};
  }
}

.g--9 {
  grid-template-areas: 
    "i1 i2 i3"
    "i4 i5 i6"
    "i7 i8 i9"
}

.g--1 {
  grid-template-areas: 
    "i1 i1 i1"
    "i1 i1 i1"
    "i1 i1 i1"
}

.g--2 {
  height: 500px * 1/2;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-template-areas: 
    "i1 i2"
}

.g--3 {
  height: 500px * 2/3;
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: 
    "i1 i1 i2"
    "i1 i1 i3"
}
.g--4 {
  grid-template-areas: 
    "i1 i1 i2"
    "i1 i1 i3"
    "i1 i1 i4"
}
.g--5 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas: 
    "i1 i1 i1 i3 i3 i3"
    "i1 i1 i1 i3 i3 i3"
    "i1 i1 i1 i4 i4 i4"
    "i2 i2 i2 i4 i4 i4"
    "i2 i2 i2 i5 i5 i5"
    "i2 i2 i2 i5 i5 i5"
}
.g--6 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 
    "i1 i1 i2"
    "i1 i1 i3"
    "i4 i5 i6"
}

.g--7 {
  grid-template-columns: repeat(6, .5fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 
    "i1 i1 i2 i2 i2 i2"
    "i1 i1 i3 i3 i4 i4"
    "i5 i5 i6 i6 i7 i7"
}

.g--8 {
  grid-template-columns: repeat(6, .5fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 
    "i1 i1 i1 i1 i2 i2"
    "i3 i3 i4 i4 i5 i5"
    "i6 i6 i7 i7 i8 i8"
}