Расположение элементов с помощью grid

.grid { 
  display: grid; 
  grid-template-areas:  
  'elem1 elem3 elem4 elem5 elem7 elem8' 
  'elem2 elem3 elem6 elem6 elem7 elem9'; 
  grid-gap: 10px; 
} 
 
.grid > div { 
  display: block; 
  width: 100%; 
  border: 1px solid #ddd; 
  box-shadow: 0 0 3px 0 #ddd; 
  border-radius: 5px; 
  box-sizing: border-box; 
  min-height: 100px; 
} 
 
.elem1 {grid-area: elem1;} 
.elem2 {grid-area: elem2;} 
.elem3 {grid-area: elem3;} 
.elem4 {grid-area: elem4;} 
.elem5 {grid-area: elem5;} 
.elem6 {grid-area: elem6;} 
.elem7 {grid-area: elem7;} 
.elem8 {grid-area: elem8;} 
.elem9 {grid-area: elem9;}

<div class="grid"> 
  <div class="elem1">1</div> 
  <div class="elem2">2</div> 
  <div class="elem3">3</div> 
  <div class="elem4">4</div> 
  <div class="elem5">5</div> 
  <div class="elem6">6</div> 
  <div class="elem7">7</div> 
  <div class="elem8">8</div> 
  <div class="elem9">9</div> 
</div>

.grid-container { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  grid-template-areas: "One Two three four five six" "seven Two eight eight five nine"; 
} 
 
.One { 
  grid-area: One; 
} 
 
.Two { 
  grid-area: Two; 
} 
 
.three { 
  grid-area: three; 
} 
 
.four { 
  grid-area: four; 
} 
 
.five { 
  grid-area: five; 
} 
 
.six { 
  grid-area: six; 
} 
 
.seven { 
  grid-area: seven; 
} 
 
.eight { 
  grid-area: eight; 
} 
 
.nine { 
  grid-area: nine; 
}

<div class="grid-container"> 
  <div class="One"></div> 
  <div class="Two"></div> 
  <div class="three"></div> 
  <div class="four"></div> 
  <div class="five"></div> 
  <div class="six"></div> 
  <div class="seven"></div> 
  <div class="eight"></div> 
  <div class="nine"></div> 
</div>