Skrypt ustawiający divy w gridzie nie działa - Masonry

Szukałem skryptu, żeby ułożyć divy w gridzie. Wykorzystałem Masonry, ale niestety, skrypt nie funkcjonuje. Nie wiem, dlaczego, wszystko robię tak, jak w poradnikach, nic nie grzebałem przy kodzie. Zastosowałem do (window).on('load'), ponieważ divy łądują się dynamicznie. Ale to samo zastosowanie przy własnej roboty toggle_agenda.js odpowiadające za rozwijanie bloków działa.

Wrzucam kod i LINK do strony

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/toggle_agenda.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/mobile_menu.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.malihu.PageScroll2id.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
    (function($){
        $(window).on('load',function(){
$('.wpgmp_listing_grid').masonry({
 percentPosition: true,
  columnWidth: 'agenda-item',
  itemSelector: '.agenda-item',
  horizontalOrder: true
});  });});
</script>
<script>
    (function($){
        $(window).on("load",function(){
            $("a[rel='m_PageScroll2id']").mPageScroll2id();
        });
    })(jQuery);
</script>

Co jest nie tak? Jak to naprawić? Z góry dzięki za pomoc?

Dlaczego chcesz ustawiać divy w gridzie za pomocą javascriptu?

Chciałem w css, ale nie wiem, czy mogę jakoś to zrobić? Zwłaszcza, że te divy mogą zmieniąc wysokośc i dalej powinny być ułożone w gridzie... Jak mogę to rozwiązać?

Bootstrap4 grid
Flexbox Grid
Skeleton