Макет страницы с использованием Flex или сетки

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  background-color: #2196F3;
  padding: 10px;
}

.second {
  margin-top: 100px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/* 7 grid items */

.s1 {
  grid-area: 1 / 1 / 4 / 13;
}

.s2 {
  grid-area: 4 / 1 / 8 / 5;
}

.s3 {
  grid-area: 4 / 5 / 8 / 9;
}

.s4 {
  grid-area: 4 / 9 / 8 / 13;
}

.s5 {
  grid-area: 8 / 1 / 13 / 8;
}

.s6 {
  grid-area: 8 / 8 / 11 / 13;
}

.s7 {
  grid-area: 11 / 8 / 13 / 13;
}


/* 9 grid items */
.v1 {
  grid-area: 1 / 1 / 3 / 13;
}

.v2 {
  grid-area: 3 / 1 / 6 / 5;
}

.v3 {
  grid-area: 3 / 5 / 6 / 9;
}

.v4 {
  grid-area: 3 / 9 / 6 / 13;
}

.v5 {
  grid-area: 6 / 1 / 10 / 7;
}

.v6 {
  grid-area: 6 / 7 / 8 / 13;
}

.v7 {
  grid-area: 8 / 7 / 10 / 13;
}

.v8 {
  grid-area: 10 / 1 / 13 / 7;
}

.v9 {
  grid-area: 10 / 7 / 13 / 13;
}

<!-- The supplied picture with 7 grid items -->
<div class = "grid-container">
  <div class = "grid-item s1">1</div>
  <div class = "grid-item s2">2</div>
  <div class = "grid-item s3">3</div>
  <div class = "grid-item s4">4</div>
  <div class = "grid-item s5">5</div>
  <div class = "grid-item s6">6</div>
  <div class = "grid-item s7">7</div>
</div>

<!-- Your code with 9 grid items -->
<div class = "grid-container second">
  <div class = "grid-item v1">1</div>
  <div class = "grid-item v2">2</div>
  <div class = "grid-item v3">3</div>
  <div class = "grid-item v4">4</div>
  <div class = "grid-item v5">5</div>
  <div class = "grid-item v6">6</div>
  <div class = "grid-item v7">7</div>
  <div class = "grid-item v8">8</div>
  <div class = "grid-item v9">9</div>
</div>

.grid-container {
  display: grid;
  background-color: #2196F3;
  grid-template-rows: repeat(23, 1fr);
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  text-align: center;
}

.s1 {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 5;
  grid-column-end: 13;
}

.s2 {
  grid-row-start: 5;
  grid-column-start: 1;
  grid-row-end: 7;
  grid-column-end: 13;
}

.s3 {
  grid-row-start: 7;
  grid-column-start: 1;
  grid-row-end: 9;
  grid-column-end: 13;
}

.s4 {
  grid-row-start: 9;
  grid-column-start: 1;
  grid-row-end: 13;
  grid-column-end: 5;
}

.s5 {
  grid-row-start: 9;
  grid-column-start: 5;
  grid-row-end: 13;
  grid-column-end: 9;
}

.s6 {
  grid-row-start: 9;
  grid-column-start: 9;
  grid-row-end: 13;
  grid-column-end: 13;
}

.s7 {
  grid-row-start: 13;
  grid-column-start: 1;
  grid-row-end: 17;
  grid-column-end: 13;
}

.s8 {
  grid-row-start: 17;
  grid-column-start: 1;
  grid-row-end: 21;
  grid-column-end: 7;
}

.s9 {
  grid-row-start: 17;
  grid-column-start: 7;
  grid-row-end: 20;
  grid-column-end: 13;
}

.s10 {
  grid-row-start: 20;
  grid-column-start: 7;
  grid-row-end: 21;
  grid-column-end: 13;
}

.s11 {
  grid-row-start: 21;
  grid-column-start: 1;
  grid-row-end: 24;
  grid-column-end: 7;
}

.s12 {
  grid-row-start: 21;
  grid-column-start: 7;
  grid-row-end: 24;
  grid-column-end: 13;
}

<div class = "grid-container">
  <div class = "grid-item s1">1</div>
  <div class = "grid-item s2">2</div>
  <div class = "grid-item s3">3</div>
  <div class = "grid-item s4">4</div>
  <div class = "grid-item s5">5</div>
  <div class = "grid-item s6">6</div>
  <div class = "grid-item s7">7</div>
  <div class = "grid-item s8">8</div>
  <div class = "grid-item s9">9</div>
  <div class = "grid-item s10">10</div>
  <div class = "grid-item s11">11</div>
  <div class = "grid-item s12">12</div>
</div>