Как добавить сетку для angular-gridster?

Как добавить динамическую сетку координат для углового-сетстера?

Мой пример http://jsfiddle.net/qqzvjvfx/24/

<div ng-app="someApp" ng-controller="someCtrl">
    <div gridster="gridsterOpts">
        <ul>
            <li class="" gridster-item="block" ng-repeat="block in sorted_blocks">
                <div class="panel panel-default">
                    <div class="panel-heading">{{ block.title }}</div>
                    <div class="panel-content image-responsive" 
                         ng-style="{'background-image':'url(' + block.image + ')'}"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

Угловой контроллер:

angular.module('someApp', ['gridster']).controller('someCtrl', function ($scope, $http) {
    $scope.gridsterOpts = 
    {
        resizable: {
            enabled: true
        },
        columns: 4,
        rows: 16,
        minRows: 4,
        margins: [0,0],
        floating: false
    };
    $scope.sorted_blocks = [{
        id: 1,
        sizeX: 1,
        sizeY: 1,
        image: 'http://i.imgur.com/NI1Xm16.jpg',
        title: 'title1',
        row: 1,
        col: 2
    }, {
        id: 2,
        sizeX: 2,
        sizeY: 1,
        image: 'http://i.imgur.com/x6qmeUY.jpg',
        title: 'title2',
        row: 0,
        col: 0
    }];
});

Css:

.panel {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}

.panel .panel-content {
    flex-grow: 1;
}

.image-responsive {
    background-size: contain;
    background-repeat: no-repeat;
}

Ширина поля сетки фиксирована - 4 столбца, высота динамическая, от 4 до 16 строк. Мне нужно добавить сетку под блоки, как это.