Why are images overflowing in CSS Grid?

Question

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.

<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=eyJhcHBfaWQiOjEyMDd9&s=b544282e40e1ddee968dac7188ae9a3e&auto=format&fit=crop&w=1350&q=80" alt="pic3">
  </div>

</div>

/* this is the CSS styles */

.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;

        }

Answer 1

There are several things going on with your layout:

1. You have the columns defined with repeat(3, 1fr), but you also have the width of each image defined in the HTML. Because the widths are so large (e.g., width="1200px"), there won't be any free space for the fr unit to distribute on most screen sizes. As a result, the images may overflow their grid item parents.

2. You want the last two images stacked vertically. But the grid container has only one explicit row (grid-template-rows: 200px). This means that additional rows created (i.e., implicit rows) will be created with auto height, by default.

3. The grid-column-gap: 1px is working. The problem is that the images are overflowing their grid item parents and overlaying the gap.

4. You may need to override the min-width: auto / min-height: auto defaults on grid items, which prevent them from shrinking smaller than the size of their content (which are images, in this case). Here's a more detailed explanation: Prevent content from expanding grid items

Without knowing more details about your objectives, I can't be more specific.

Here's your code in a jsFiddle demo (borders added to illustrate overflows).