Как построить сетку с одним большим элементом?

section { 
  margin-right: -1em; 
} 
 
div { 
  width: calc((100% - 3em) / 3); 
  float: left; 
  height: 3em; 
  margin: 0 1em 1em 0; 
  border: 1px solid; 
  box-sizing: border-box; 
} 
 
.large { 
  width: calc(2 * (100% - 3em) / 3 + 1em); 
  height: 7em; 
}

<section> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div class=large></div> 
  <div></div> 
  <div></div> 
</section>

.container { 
    display: grid; 
    gap: 10px; 
    width: 100%; 
    height: 250px; 
    grid-template-areas: "A B C" "D D E" "D D F"; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
} 
 
.container>div { 
    border: 2px solid blue; 
} 
 
.A { 
    grid-area: A; 
} 
 
.B { 
    grid-area: B; 
} 
 
.C { 
    grid-area: C; 
} 
 
.D { 
    grid-area: D; 
} 
 
.E { 
    grid-area: E; 
} 
 
.F { 
    grid-area: F; 
}

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

section { 
  display: grid; 
  gap: 1em; 
  height: 10em; 
  grid-template-columns: 1fr 1fr 1fr; 
} 
 
div { 
  border: 1px solid; 
} 
 
.large { 
  grid-row: span 2; 
  grid-column: span 2; 
}

<section> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div class=large></div> 
  <div></div> 
  <div></div> 
</section>

div { 
  width: 100%; 
  height: 250px; 
  border: 1px solid #000; 
} 
 
.h150 { 
  height: 150px; 
} 
 
section { 
  width: 100%; 
  display: flex; 
} 
 
.col { 
  flex-direction: column; 
}

<section> 
  <section class="col"> 
    <section> 
      <div></div> 
      <div></div> 
    </section> 
    <div></div> 
  </section> 
 
  <section class="col"> 
    <div class="h150"></div> 
    <div class="h150"></div> 
    <div class="h150"></div> 
  </section> 
</section>

.el--a{ 
  width: 510px; 
  border: 1px solid red; 
  display: flex; 
  flex-flow: row wrap; 
  position: relative; 
} 
.el--a > *{ 
  margin: 10px; 
  border: 1px solid black; 
  box-sizing: border-box; 
  display: inline-block; 
} 
.el__150{ 
  height: 40px; 
  width: 150px; 
  clear: both; 
} 
.el__320{ 
  height: 100px; 
  width: 320px; 
  clear: both; 
} 
.el__150_float{ 
  position: absolute; 
  bottom: 0; 
  right: 0; 
}

<div class="el--a"> 
  <div class="el__150"></div> 
  <div class="el__150"></div> 
  <div class="el__150"></div> 
  <div class="el__320"></div> 
  <div class="el__150"></div> 
  <div class="el__150 el__150_float"></div> 
</div>