jQuery / css：具有方形div的流体响应同位素网格

我试图弄清楚它是否可能具有流体同位素布局的方形div.我有一个4列网格,每个div是容器的24％宽度,但我希望这些div是完美的正方形,我无法弄清楚如何实现这一点.
这是一个有效的jsfiddle演示： http://jsfiddle.net/RJZu6/8/
jQuery的：

var $container = $("#main-grid");

var size = function () {
    $container.isotope({
        masonry: {
            columnWidth: $container.width() / 4
        }
    });
}

$container.imagesLoaded(function () {
    $container.isotope({
        itemSELEctor: ".grid-block",animationENGIne: "jquery",sortBy: "random",resizable: false,masonry: {
            columnWidth: $container.width() / 4
        }
    });

    size();
});

$(window).smartresize(sizE);

CSS：

#main-grid { 
    position: absolute;
    width: 100%;
}

.grid-block { 
    width: 24%; height: 50px; 
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    BACkground: no-repeat 50% 50%;
    -webkit-BACkground-size: cover;
    -moz-BACkground-size: cover;
    -o-BACkground-size: cover;
    BACkground-size: cover;
}

流动性和功能性很好,只是我遇到麻烦的div的大小.是否有可能拥有完美的方形响应div？

width: 50%;
height: 0;
padding-bottom: 50%;

.grid-block { 
    width: 24%;  
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    BACkground: no-repeat 50% 50%;
    -webkit-BACkground-size: cover;
    -moz-BACkground-size: cover;
    -o-BACkground-size: cover;
    BACkground-size: cover;
    padding-bottom:24%;
}