Page Layout using Flex or grid

Question

I need to create this layout, I've tried using grid system. But i could not able achieve it. Below is my code snippet.

Note: DOM Structure cannot be altered Grid or flex can be used

.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
background-color: #2196F3;
padding: 10px;
gap:15px;
}
.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;
}
.grid-item.s1 {grid-column: 1/13;}
.grid-item.s2 {grid-column: 1/5;}
.grid-item.s3 {grid-column: 5/9;}
.grid-item.s4 {grid-column: 9/13;}
.grid-item.s5,.s7 {grid-column: 1/7;}
.grid-item.s6,.s8 {grid-column: 7/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 class="grid-item">7</div>
</div>
<div class="grid-item s7">8</div>
<div class="grid-item s8">9</div>
</div>

Answer 1

Your picture and your code suggest 2 different layouts. Are you looking for a gridsystem consisting of 9 or 7 items? Either way, I had a go at both.

Judging by your image I was not sure of the height of grid item 7, but you can adjust that to your liking. I used grid-template-rows and grid-template-columns to define a 12x12 grid and then defined each item's areas with grid-area. You can easily use a grid-generator for this.

.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>

EDIT: From Anuresh comment on this answer:

.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>