Верстка и позиционирование div-блоков

.grid { 
  display: grid; 
  grid-template-columns: auto auto auto auto auto auto; 
  grid-gap: 10px; 
  background-color: #2196F3; 
  padding: 10px; 
} 
.grid > div { 
  background-color: rgba(255, 255, 255, 0.8); 
  text-align: center; 
  padding: 20px 0; 
  font-size: 30px; 
} 
.item8 { 
  grid-area: 1 / 2 / 3 / 4; 
}

<div class="grid"> 
  <div class="item1">1</div> 
  <div class="item2">2</div> 
  <div class="item3">3</div>   
  <div class="item4">4</div> 
  <div class="item5">5</div> 
  <div class="item6">6</div> 
  <div class="item7">7</div> 
  <div class="item8">8</div>   
  <div class="item9">9</div> 
</div>

div.container{ 
  width:120px; 
  height:30px; 
  display:flex; 
  flex-wrap:wrap; 
  flex-direction:column; 
  align-items:start; 
} 
div.item{ 
  width:30px; 
  height:15px; 
  font-size:0; 
  border:2px solid #000; 
  display:inline-block; 
  vertical-align:top; 
  overflow:hidden; 
  box-sizing:border-box; 
} 
div.item:nth-child(3){ 
  height:30px; 
}

<div class="container"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

.block { 
  width: 440px; 
  height: 210px; 
  border: 1px dotted #000; 
  display: flex; 
  justify-content: flex-start; 
  flex-wrap: wrap; 
} 
   
    .block div { 
      border: 1px solid #000; 
      width: 100px; 
      height: 100px; 
      display: inline-block; 
      margin: 1px; 
} 
       
      .block div:nth-child(2) { 
        height: 200px; 
      } 
      .block div:nth-child(5) { 
        margin-top: -100px; 
      } 
      .block div:nth-child(6) { 
         margin-top: -100px; 
        margin-left: 106px; 
      } 
      .block div:nth-child(7) { 
        margin-top: -102px; 
        margin-left: 314px; 
      } 
  

<div class="block"> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
  <div>4</div> 
  <div>5</div> 
  <div>6</div> 
  <div>7</div> 
</div>