Unexpected empty space in a two-column gallery? [HTML/CSS]

Question

I'm having a strange problem with the photo gallery displaying in two columns. For some photos (specifically 5, 9, 23, 33, 39, 45) the photo doesn't display in the right place, it just goes to the next column, hence I have white blank spaces... Below the code and some screenshoots.

#wrapper{
    width:900px;
    margin:auto;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="row">
    <div class="column">
      <img src="/object_1.JPG" width="100%" height="100%"/>
      <div class="photo_captions">
        <p>Obiekt 1...</p>
      </div>
    </div>
    <div class="column">
      <img src="/object_2.JPG" width="100%" height="100%"/>
      <div class="photo_captions">
        <p>Obiekt 2...</p>
      </div>
    </div>
    <div class="column">
      <img src="/object_3.JPG" width="100%" height="100%"/>
      <div class="photo_captions">
        <p>Obiekt 3...</p>
      </div>
    </div>
  </div>
</div>

1 2

I don't know what's going on... all the photos are the same size. I would like the photos to display without this unexpected white space.