как разместить блок картинок слева большая и справа 4 маленьких по высоте такой же?

img { width: 100%; } 
 
table { 
  width: 300px; /* ширина таблицы, изменить на нужную */ 
} 
 
/* table td { border: 1px solid black; } /* расскоментировать чтобы видеть границы таблицы */

<table> 
<tr> 
  <td width="*" rowspan=2><img src="https://bugaga.ru/uploads/posts/2018-03/1522426573_3.jpg" alt="1"></td> 
  <td width="24%"><img src="http://static.skaip.su/img/emoticons/180x180/f6fcff/hi.gif" alt="2"></td> 
  <td width="24%"><img src="http://static.skaip.su/img/emoticons/180x180/f6fcff/hi.gif" alt="3"></td> 
</tr> 
<tr> 
  <td><img src="http://static.skaip.su/img/emoticons/180x180/f6fcff/hi.gif" alt="4"></td> 
  <td><img src="http://static.skaip.su/img/emoticons/180x180/f6fcff/hi.gif" alt="5"></td> 
</tr> 
</table>

body{ 
  display: grid; 
  grid-template-areas: 
   'header article footer' 
  'header ads Nav'; 
  grid-template-rows: 100px 100px; 
  grid-template-columns: repeat(3, 256px); 
  grid-gap: 10px; 
 
} 
 
img{ 
  width: 100%; 
  height: 100%; 
} 
 
#pageHeader{ 
  grid-area: header; 
  background-color: gold;  
   
} 
#mainArticle{ 
   grid-area: article; 
   background-color: gold;  
} 
#mainNav{ 
  grid-area: Nav; 
   background-color: gold;  
 
} 
#siteAds{ 
  grid-area: ads; 
   background-color: gold;  
     
} 
#pageFooter{ 
  grid-area: footer; 
   background-color: gold;  
    
}

<header id=pageHeader> 
  
</header> 
<article id=mainArticle> 
 
</article> 
<nav id=mainNav> 
 
</nav> 
<div id=siteAds> 
 
</div> 
<footer id=pageFooter> 
 
</footer>