Jquery 具有扩展div的自适应网格布局

我正在寻找一个自适应网格类型的布局，将安排网格框时，一个div扩展。我不希望它在网格中留下空白。我有下面的代码和图形来说明这一点

这个例子很好地说明了我试图阻止它做什么。如果你点击“a”，看起来没问题。如果单击“b”或“c”，将生成空白单元格区域

简单代码如下：

$('.list-item').on('click', function (e) {
    if ($(this).hasClass('open')) {

        $(this).removeClass('open');

        if ($(this).hasClass('list')) {
            $(this).animate({
                height: 10
            }, 0);
        } else {

            $(this).animate({
                height: 150
            }, 0);
            $(this).animate({
                width: 250
            }, 0);
        }

    } else {
        $(this).addClass('open');

        if ($(this).hasClass('list')) {
            $(this).animate({
                height: 330
            }, 0);
        } else {
            $(this).animate({
                height: 340
            }, 0);
            $(this).animate({
                width: 520
            }, 0);
        }
    }
    e.preventDefault();

});

$('.list-view').on('click', function (e) {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $('.list-item').removeClass('list');
        $('.list-item').animate({
            height: 150
        }, 0);
        $('.list-item').animate({
            width: 250
        }, 0);


    } else {
        $(this).addClass('open');
        $('.list-item').addClass('list');
        $('.list-item').animate({
            height: 10
        }, 0);

        $('.list-item').animate({
            width: 960
        }, 0);

    }
    e.preventDefault();
});

我的代码不是最干净的。我缺少的另一个组件是，我希望一次只能扩展一个div。如果一个div被展开，而用户单击了另一个div，我希望展开的div缩小

谢谢你的想法和帮助