Empty space below blocks that are sized by intrinsic ratio in responsive grids

[drewbaker]

When using a Masonry to layout a grid that contains blocks that are sized by a child element sized from and intrinsic ratio, then you get empty space below each block (generally 5px or more, so it's more than a rounding error it seems). If you resize the browser window after page load, then the blocks stack correctly.

That behavior is super strange to me, because there are no images on the page, so what has changed between load and resize?

See CodePen for reduced test case: https://codepen.io/drewbaker/pen/ZMBdPY

I thought it might be related to line-height or font-size perhaps, but you can see in my test case I set those to 0, and it still occurs.

If you are not familiar with intrinsic ratio image ratio sizing, this is the basics of it. This block will have space below it in a responsive Masonry grid.

  <div class="grid-item grid-item-1">
      <div class="image-sizer" style="padding-bottom: 56.25%;"></div>
  </div>

I included a few screenshots of it too.

[desandro]

Could it be the scroll bar? Add

html { overflow-y: scroll; }

[drewbaker]

OK, so it does seem to be related to the scroll bar. If you size the browser to not need a scroll bar, it works fine. But if that initial load has a scrollbar, the blocks have a line under them.

[drewbaker]

So is there a way to get this to work without forcing a scroll bar on always?

[desandro]

You can trigger layout again after the initial layout has been set.