Pictures in Masonry grid layout are overlapping each other

I followed all steps on getting started masonry but my result is completely different. I want it to look like this: http://iam.beyonce.com/tagged/my_work. But it looks totally different as you can see: https://jsfiddle.net/saitam/tfomnuqs/

Here is an example code:

<!-- Masonry -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="css/style.css">

<body>

<div class="grid">

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg">
      </div>
    </a>
  </div>

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg">
      </div>
    </a>
  </div>

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg">
      </div>
    </a>
  </div>


</div>

</body>

Many thanks in advance for any help.

Solution

Try this code give 100% width for images

.brightness img {
    max-width: 100%;
}

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});

* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}


/* masonry */
.grid-item {
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}


.brightness img:hover {
    opacity: .5;
}
.brightness img {
    max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="...">
    </div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="...">
</div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="...">
</div></a>
  </div>
  
    <div class="grid-item">
   <a href="#">
      <div class="brightness">
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="...">
    </div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="...">
</div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="...">
</div></a>
  </div>
</div>