For the layout, the first image should take up 3/4 or 2 columns of available space, while the remaining two images would be stacked vertically in the last column.
<div class="wrapper1">
<div class="one">
<img width="1200px"height="500" src="https://images.unsplash.com/photo-1459666644539-a9755287d6b0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=279b60ab483a2610d1e7260dc213898c&auto=format&fit=crop&w=828&q=80" alt="pic1">
</div>
<div class="two">
<img height="300px" width="600px" src="https://images.unsplash.com/photo-1508182314998-3bd49473002f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af394daae4bdbc4a95dc2204984b790d&auto=format&fit=crop&w=1350&q=80" alt="pic2">
</div>
<div class="three">
<img height="300px" width="600px"src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&ixid=eyJhcH.../* this is the CSS styles */</p>
<pre><code>.wrapper1{
display:grid;
grid-column-gap:1px;
grid-template-columns:repeat(3,1fr);
grid-template-rows: 200px;
}
.one{
grid-column:1/3;
grid-row: 1;
}
.two{
grid-column: 3;
grid-row:1;
}
.three{
grid-column:3;
grid-row:2;
}
.wrapper2{
display: grid;
}