Perfect row alignment in "Portfolio Grid"

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

With this hack, you can force your project grid to always have perfect row alignment.

Step 1: Add the "sp-perfect-grid" class name to the "Portfolio Grid" module.

Step 2: Now add the "Code" module as the last item on the page. Paste the following JavaScript into the module:

<script>
(function($) {
  function initGrid(gridEl) {
    var $grid = $(gridEl);
    var $items = $grid.find('.masonry-item');    var isMobile = $(window).width() < 768;    if (isMobile) {
      $items.find('.thumb-inner > img').css('height', 'auto');
      return;
    }    var gridWidth = $grid.find('.masonry').width();
    var itemPadding = $items.first().css('padding-left');
    var gutter = Number(itemPadding.replace('px', ''));    var rows = [{
      size: 0,
      items: []
    }];
    var current = 0;    $items.each(function(index) {
      var $item = $(this);
      var itemSize = Number($item.attr('data-xl-width'));
      var newSize = rows[current].size + itemSize;      if (newSize <= 12) {
        rows[current].size = newSize;
        rows[current].items.push(index);
      } else {
        current += 1;
        rows[current] = {
          size: itemSize,
          items: [index],
        }
      }
    });    rows.forEach(function(row) {
      var height = row.items.reduce(function(acc, itemIndex) {
        var $item = $items.eq(itemIndex);
        var $image = $item.find('.thumb-inner > img');        var itemSize = Number($item.attr('data-xl-width'));
        var height = Number($image.attr('height'));
        var width = Number($image.attr('width'));
        var realWidth = (gridWidth * itemSize / 12) - (gutter * 2);
        var realHeight = height * realWidth / width;        var result = Math.floor(realHeight);
        return acc > result ? acc : result;
      }, 0);      row.items.forEach(function(itemIndex) {
        var $item = $items.eq(itemIndex);
        var $image = $item.find('.thumb-inner > img');        $image.css({
          transition: 'transform 0.3s ease',
          objectFit: 'cover',
          objectPosition: 'center',
          height: height + 'px'
        });
      });
    });
  }  function init() {
    var $gridElements = $('.sp-perfect-grid');
    $gridElements.each(function() {
      initGrid(this);
    });
  }  $(document).ready(init);
  $(window).resize(init);
})(jQuery);
</script>