I'm not a CSS expert.. so I find myself trying to figure out if there is CSS issue, or Masonry settings issue that are producing these gaps between the images?

example

.masonry-item {
  width: 270px !important;
  height: 220px;
  float: left;
  background: #DDD !important;
  border: none !important;
}

.view-projects .masonry-item img {
  height: 100%;
}

.view-projects .year {
  width: 170px !important;
}

HTML

<div class="masonry-group masonry-group-2">
  <div class="masonry-item year">2015</div>

    <div class="masonry-item"><a href="/event/2017/maker-faire-2015"><img src="/sites/default/files/styles/programming_270x220/public/2017-06/2015-11-01-Maker-Faire-03.jpg?itok=FC-kRFkl" width="270" height="220" alt="" typeof="foaf:Image" class="img-responsive" /></a>
  </div>
    <div class="masonry-item"><a href="/event/2017/necropolis"><img src="/sites/default/files/styles/programming_270x220/public/2017-06/309070697_1280x720.jpg?itok=wc3sPAU3" width="270" height="220" alt="" typeof="foaf:Image" class="img-responsive" /></a>
    </div>
</div>
CommentFileSizeAuthor
masonry-snap.png502.63 KBmlecha
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mlecha created an issue. See original summary.

mlecha’s picture

mlecha CreditAttribution: mlecha commented

On page load, the tiles appear close together, and then they pop-out after the page has completely loaded, like the div locations are being recalculated.

Dom.’s picture

Dom. CreditAttribution: Dom. commented
Status: Active » Closed (works as designed)

Because your elements are
width: 270px !important;
then that means your column size (if you want 0 gaps) should also be 270px.
Masonry should be smart enough to determine it, but because the first element seems smaller, then it does not properly.
There is a configuration in the masonry views settings to fix the column size. Also add 270px there. And you can set gap to 0 also in those configurations.