title: Why are images overflowing in CSS Grid?
body: <p>The fist picture is supposed to take 3/4 or 2 columns of available space and the remaining two pictures would be in the right in the last column vertically.</p>
  
  <pre><code>&lt;div class="wrapper1"&gt;
  &lt;div class="one"&gt;
    &lt;img  width="1200px"height="500" src="https://images.unsplash.com/photo-1459666644539-a9755287d6b0?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=279b60ab483a2610d1e7260dc213898c&amp;auto=format&amp;fit=crop&amp;w=828&amp;q=80" alt="pic1"&gt;
    &lt;/div&gt;
  
  
  &lt;div class="two"&gt;
    &lt;img height="300px" width="600px" src="https://images.unsplash.com/photo-1508182314998-3bd49473002f?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=af394daae4bdbc4a95dc2204984b790d&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="pic2"&gt;
    &lt;/div&gt;
  &lt;div class="three"&gt;
    &lt;img  height="300px" width="600px"src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=b544282e40e1ddee968dac7188ae9a3e&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="pic3"&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>/* 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;
  
          }
  </code></pre>