Muuri.jsでサイト読み込み時に要素のレイアウトが崩れてしまう

Muuri.jsを使って画像ギャラリーを表示するサイトを制作しています。Webは少し経験がありますが非専門の者です。

画面を読み込んだ瞬間に画像レイアウトが崩れてしまい困っています（画像が上に寄って重なってしまっている状態）。
要素を全てhtml内にベタ打ちすればこのようにはならないのですが、後々のことを考え、jsonでリスト化した情報をjsでhtmlに書き込む方法を取っています。

イメージ説明
サイト読み込み後、ブラウザサイズを少しだけ変更すると、リキッドレイアウトの処理が走り、正しいレイアウトとなります。

画面読み込み時に最初から正しい状態で表示するにはどうしたら良いか、アドバイスをいただけると幸いです。
初めての質問で説明が拙かったら申し訳ありません。

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="description"  content="test">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<link rel="stylesheet" type="text/css" href="../css/compare.css">
</head>

<body>
    <h1>TEST</h1>

    <section class="grid-wrapper">
    <div class="filter-controls">
    
<div class="control">Select01
    <select class="filter1-field form-control">
    <option value="">All</option>
    <option value="h_w">01</option>
    <option value="h_c">02</option>
    </select>
    </div>
<div class="control">Select02
    <select class="filter2-field form-control">
    <option value="">All</option>
    <option value="s_a">01</option>
    <option value="s_b">02</option>
    </select>
    </div>
<div class="control">Select03
    <select class="filter3-field form-control">
    <option value="">All</option>
    <option value="v_2">01</option>
    <option value="v_3">02</option>
    </select>
    </div>

    </div><!-- filter-controls -->
    
    <div id="all_items" class="grid">
        <!-- ここにscript_test.jsから画像要素を読み込む -->
    </div>

    </select>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="../js/muuri.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <script src="../js/script_test.js"></script>
    </body>
</html>

js
   $(window).on('load',function(){ //すべての読み込みが終わった後に実行する

        var grid = null,
            wrapper = document.querySelector('.grid-wrapper'),
    
            filterField1 = wrapper.querySelector('.filter1-field'),
            filterField2 = wrapper.querySelector('.filter2-field'),
            filterField3 = wrapper.querySelector('.filter3-field'),
    
            //sortField = wrapper.querySelector('.sort-field'),
            gridElem = wrapper.querySelector('.grid'),
            filterAttr1 = 'data-hue',
            filterAttr2 = 'data-sat',
            filterAttr3 = 'data-val',
    
            //searchFieldValue,
            //filterFieldValue,
    
            filterFieldValue1,
            filterFieldValue2,
            filterFieldValue3,
            
            sortFieldValue,
            dragOrder = [];
      
        //Init the grid layout
        grid = new Muuri(gridElem, {
        //  items: generateElements(),
          dragEnabled: true
        });
    
     
        // jsonからリストを取得し、HTMLに要素を挿入する
        var ret = [];
        $.getJSON("../data/item_list.json" , function(item_list) {
          var
            len = item_list.length,
            tmp_str,
            appObj, conObj, _item;
    
        for(var i = 0; i < len; i++) {    
        //var grid = new Muuri('.grid');
        _item = document.createElement('div');
        _item.innerHTML = '<div class="item" data-hue="h_'+item_list[i].hue+'" data-sat="s_'+item_list[i].sat+
          '" data-val="v_'+item_list[i].val+'" data-title="'+item_list[i].id+'">'+
          '<div class="item-content">'+
          '<a href="../img/'+item_list[i].id+'_info.jpg" data-fancybox="group" data-caption="'+item_list[i].caption+'">'+
          '<img src="../img/'+item_list[i].id+'.jpg" alt=""></a></div></div>';
        ret.push(_item.firstChild);
        }
        grid.add(ret);
    
        });
    

        //絞り込みフィルターを操作した時の挙動
        filterFieldValue1 = filterField1.value;
        filterFieldValue2 = filterField2.value;
        filterFieldValue3 = filterField3.value;
      
        // Filter field event binding
        //filterField.addEventListener('change', filter);
        filterField1.addEventListener('change', filter);
        filterField2.addEventListener('change', filter);
        filterField3.addEventListener('change', filter);
      
        // Filtering
        function filter() {
          //filterFieldValue = filterField.value;
          filterFieldValue1 = filterField1.value;
          filterFieldValue2 = filterField2.value;
          filterFieldValue3 = filterField3.value;
          //alert(filterFieldValue1);
          grid.filter(function (item) {
            var element = item.getElement(),
                isFilterMatch1 = !filterFieldValue1 ? true : (element.getAttribute(filterAttr1) || '') === filterFieldValue1,
                isFilterMatch2 = !filterFieldValue2 ? true : (element.getAttribute(filterAttr2) || '') === filterFieldValue2,
                isFilterMatch3 = !filterFieldValue3 ? true : (element.getAttribute(filterAttr3) || '') === filterFieldValue3;
            return isFilterMatch1 && isFilterMatch2 && isFilterMatch3;
          });
        }
    
      });

json
[
    {"id":"001","hue":"w","sat":"a","val":"2","caption":"「TIXTOWER UENO」 撮影:iPhone7"},
    {"id":"002","hue":"w","sat":"d","val":"3","caption":"「MIMARU東京 上野EAST」 撮影:iPhone7"},
    {"id":"004","hue":"c","sat":"b","val":"8","caption":"茨城県北茨城市  撮影:iPhone7"},
    {"id":"016","hue":"w","sat":"d","val":"5","caption":"東京都国分寺市  撮影:Canon EOS 6D Mark II"},
    {"id":"005","hue":"n","sat":"b","val":"3","caption":"東京都台東区東下谷  撮影:iPhone7"},
    {"id":"006","hue":"w","sat":"a","val":"3","caption":"「GRIDS HOTEL+HOSTEL TOKYOUENO」 撮影:iPhone7"},
    {"id":"007","hue":"n","sat":"n","val":"4","caption":"東京都江東区  撮影:iPhone7"},
    {"id":"008","hue":"w","sat":"b","val":"6","caption":"「GREEN SPRINGS / SORANO HOTEL」 撮影:iPad Pro（第2世代）</br>壁面がやや濃色となっている部分はリブパネル。"},
    {"id":"009","hue":"w","sat":"a","val":"8","caption":"「SORANO HOTEL」 撮影:iPad Pro（第2世代）"},
    {"id":"010","hue":"w","sat":"f","val":"5","caption":"「旧東京音楽学校奏楽堂」 撮影:iPhone7"},
    {"id":"011","hue":"w","sat":"h","val":"4","caption":"「寛永寺清水観音堂」 撮影:iPhone7"},
    {"id":"012","hue":"w","sat":"h","val":"4","caption":"「国立西洋博物館」 撮影:iPhone7</br>色むらのあるタイルだが、おおよその平均値を視感測色した。"},
    {"id":"013","hue":"w","sat":"a","val":"8","caption":"東京都国分寺市  撮影:Canon EOS 6D Mark II"},
    {"id":"014","hue":"w","sat":"b","val":"8","caption":"東京都国分寺市  撮影:Canon EOS 6D Mark II"},
    {"id":"015","hue":"w","sat":"d","val":"7","caption":"東京都国分寺市  撮影:Canon EOS 6D Mark II"},
    {"id":"018","hue":"w","sat":"a","val":"9","caption":"東京都国分寺市  撮影:Canon EOS 6D Mark II"},
    {"id":"017","hue":"w","sat":"h","val":"5","caption":"東京都国分寺市  撮影:Canon EOS 6D Mark II"},
    {"id":"003","hue":"n","sat":"h","val":"7","caption":"東京都台東区東上野  撮影:iPhone7"}
  ]

css
*:before, *:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body {
    background-color: #eee;
    color: #333;
    text-align: center;
  }
  body a, body a:visited {
    color: #999;
    text-decoration: none;
  }
  body a:hover {
    color: #777;
  }
  
  h1 {
    font-size: 36px;
    margin: 40px auto;
  }
  
  .filter-controls {
    text-align: center;
    margin-bottom: 30px;
  }
  .filter-controls .control {
    display: inline-block;
    width: 240px;
    margin: 0 10px;
  }
  .filter-controls .control * {
    box-sizing: border-box;
  }
  .filter-controls .control .form-control {
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border: 2px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .filter-controls .control .form-control:focus {
    outline: 0;
    border-color: #0CAAF5;
  }
  
  .grid {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    
  }
  
  .item {
    display: block;
    position: absolute;
    /*width: 33%;/*横並びで3つ表示*/
    width: 24.3%;
    padding:0 5px 10px 5px;/*画像に余白をつける*/
    z-index: 1;
  }
  .item.blue .custom-content {
    border-color: #0CAAF5;
    color: #0CAAF5;
  }
  .item.red .custom-content {
    border-color: #F54487;
    color: #F54487;
  }
  .item.green .custom-content {
    border-color: #00DE73;
    color: #00DE73;
  }
  .item.w2 {
    width: 410px;
  }
  .item.h2 {
    height: 410px;
  }
  
  .item-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
  }
  /*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
    width:100%;
    height:auto;
    vertical-align: bottom;/*画像の下にできる余白を削除*/
  }
  
  .custom-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: #fff;
    color: #666;
    border: 2px solid;
    border-radius: 3px;
  }
  
  .item.muuri-item-dragging {
    z-index: 3;
    transition: none;
  }
  
  .item.muuri-item-releasing {
    z-index: 2;
  }
  

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 1700px) {
    .item {
      width: 23%;/*横並びで4つ表示*/
      padding: 0 5px 10px 5px;
    }
    }

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
    .item {
      width: 48%;/*横並びで2つ表示*/
      padding: 0 5px 10px 5px;
    }
    }

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}