how to change the G section ont the responsive part so that the G section is under every section

Question

I'm practicing with the grid and responsive, but I'm struggling with the media screen. I want to put the G under every section on the responsive one. this is what I tried. I also don't understand the grid very much especially the media screen to make it responsive. this is the best thing I could do for now. maybe be kind and gave an answer with a comment so I could learn more about this. thank you

        * {
    box-sizing: border-box; 
    }

    body {
    margin: 0; 
    }

    .container {
    border: 3px solid #9a9a9a;
    border-radius: 0.5rem;
    padding: 0.5rem;
    gap: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 7px 7px;
    grid-auto-flow: row;
    justify-content: stretch;
    grid-template-areas:
        "A A A A"
        "B C F G"
        "D E F G";
    
  height: 100vh;
}

.container > div {
  background-color: #d9d9d9;
  display: grid;
  place-items: center;
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}
.G {
  grid-area: G;
}

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 2fr 1fr 1fr;
    grid-template-areas: "A A A A"
                         "B C F G"
                         "D E F G";
  }

  .container > div {
    border-radius: 1rem;
  }
}

 <div class="container">
        <div class="A">A</div>
        <div class="B">B</div>
        <div class="C">C</div>
        <div class="D">D</div>
        <div class="E">E</div>
        <div class="F">F</div>
        <div class="G">G</div>
      </div>

Answer 1

Just update the grid-template-areas so that it will adjust according to what you wanted. In the CSS below, I adjusted the area instead of a 4x3 I made it 3x4 in which the G section is below every column.

  * {
    box-sizing: border-box; 
    }

    body {
    margin: 0; 
    }

    .container {
    border: 3px solid #9a9a9a;
    border-radius: 0.5rem;
    padding: 0.5rem;
    gap: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 7px 7px;
    grid-auto-flow: row;
    justify-content: stretch;
    grid-template-areas:
        "A A A A"
        "B C F G"
        "D E F G";
    
  height: 100vh;
}

.container > div {
  background-color: #d9d9d9;
  display: grid;
  place-items: center;
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}
.G {
  grid-area: G;
}

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
        "A A A"
        "B C F"
        "D E F"
        "G G G";
  }

  .container > div {
    border-radius: 1rem;
  }
}

<div class="container">
        <div class="A">A</div>
        <div class="B">B</div>
        <div class="C">C</div>
        <div class="D">D</div>
        <div class="E">E</div>
        <div class="F">F</div>
        <div class="G">G</div>
      </div>