Layout overlapping img

[MHPA23]

Hi, First sorry for my english, i'am using google translate

I'am using muuri for change position image (php + laravel). When I upload my form, the images are on top of each other, but just a change of screen or a minimize is enough that everything fits perfectly. Layout not correct -> https://ibb.co/9nsNN72 Layout correct -> https://ibb.co/SwRPCfz

Code img: @if(isset($data['imagem'])) <div class="filter-container p-0 row grid " id="image_preview"> @foreach($data['imagem'] as $img) <div class='filtr-item col-sm-2 col-sm-2-imagens item' data-id="{{$img->id}}"> <div class="item-content"> <!--<a href="{{route('admin.imoveis.removeImagem',$img->id)}}" ><i class="fas fa-trash"></i>--> <img src="{{asset($img->i2_render)}}"name='galeria_img' id="galeria_img" style="max-width: 85%; width:100%; height:auto;"> </div> </div> @endforeach </div> @endif

Code: `

function initGrid() {
  var grid = new Muuri('.grid', {
    dragEnabled: true,
    layoutOnInit: false,
  }).on('move', function () {
    saveLayout(grid);
  });
  var layout = window.localStorage.getItem('layout');
  console.log(layout)
  if (layout) {
    loadLayout(grid, layout);
  } else {
    grid.layout(true);
  }
}

function serializeLayout(grid) {
  var itemIds = grid.getItems().map(function (item) {
    return item.getElement().getAttribute('data-id');
  });
  return JSON.stringify(itemIds);
}

function saveLayout(grid) {
  var layout = serializeLayout(grid);
  window.localStorage.setItem('layout', layout);
}

function loadLayout(grid, serializedLayout) {
  var layout = JSON.parse(serializedLayout);
  var currentItems = grid.getItems();
  var currentItemIds = currentItems.map(function (item) {
    return item.getElement().getAttribute('data-id')
  });
  var newItems = [];
  var itemId;
  var itemIndex;

  for (var i = 0; i < layout.length; i++) {
    itemId = layout[i];
    itemIndex = currentItemIds.indexOf(itemId);

    console.log("ItemId: "+itemId);
    console.log("itemIndex: "+i);


     $.ajax({
        url: "{{route('admin.imoveis.ordenaImagens')}}",
        type: "post",
        data: {
            //Passa os dados necessários
            "_token": "{{ csrf_token() }}",
            "id_img": itemId,
            "ordem" : i,
        },
        dataType: 'json',
        success: function(response){
            alert("ok");
        }
    });

    if (itemIndex > -1) {
      newItems.push(currentItems[itemIndex])
    }
  }

grid.sort(newItems, {layout: 'instant'}); } `

[yeahdino]

My approach was to hide the grid and then call grid.refreshItems().layout(); and reveal it after the page loads.