jQuery: изотоп жидкости работает только после изменения размера

У меня возникли проблемы с настраиваемой сеткой жидких изотопов, простой сеткой из 4 столбцов, каждая из которых .grid-block имеет ширину 24%, оставляя допуск 1%.
Однако проблема в том, что когда страница загружается, она отображается в виде сетки из 3 столбцов, пока размер окна браузера не изменится и оно не разделится на 4 столбца.
Вот демонстрация jsfiddle: http://jsfiddle.net/BVzTV/4/
jQuery:

$(document).ready(function() {
var $container = $('#main-grid');

$container.isotope({
    itemSelector: '.grid-block',
    animationEngine: 'best-available',
    resizable: false,
    masonry: { columnWidth: $container.width() / 4 }
    });

    $(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 4 }
  });
    });
});

Я не могу понять, почему это происходит / как это исправить, на самом деле это просто. Я просто пытаюсь создать простую сетку из 4 столбцов при загрузке страницы и при изменении ее размера. Любые предложения будут ценны!