Сделать размер блока в зависимости от размера картинки в этом блоке

Всем привет, есть блок:

<div class="products grid" style="position: relative; height: 591.2px;">
    
    <div class="products__item grid-item" style="position: absolute; left: 0px; top: 0px;">
    <a href="">
        <div class="products__item-top">
            <img src="/storage/images/products/1/12_nebo.jpg">
        </div>
        <div class="products__item-top-data">
            <span class="products__item-title">"Небо"</span>
        </div>
    </a>
    </div>
    <div class="products__item grid-item" style="position: absolute; left: 0px; top: 0px;">
    <a href="">
        <div class="products__item-top">
            <img src="/storage/images/products/1/12_nebo.jpg">
        </div>
        <div class="products__item-top-data">
            <span class="products__item-title">"Небо"</span>
        </div>
    </a>
    </div>
 </div>

Нужно изменить высоту элементам grid-item, что бы она ровнялась высоте изображения + 100px. Пробовал изменить высоту вот так

$(document).ready(function(){
        $(".grid-item").each(function(){
            let hg = $(this).find(".products__item-top").find("img").height();
            let hgs = hg + 100;
            console.log(hgs);
            $(this).height(hgs);
        })
    })

Но ничего не происходит, в консоль выводит 0 0 0 0 0 Может это из за masonry? Ниже идет его код

var $grid = $('.grid').masonry({
    // options
    itemSelector: '.grid-item',
  });

Изменять нужно для того что бы масонри сработал