我如何获得gridster中的实际列数？

Question

我想获得gridster中的实际列数。列数根据浏览器的分辨率而变化。我的目标是，在最大宽度上设置小部件。

选项max_cols不返回实际的列数。

我目前的解决方案并不好：

var gridster;

$(function(){
    
    gridster = $(".gridster > ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 55]
    }).data('gridster');
        
});

var noOfCols = getRealNumberOfWidgets();
alert(noOfCols);
gridster.add_widget.apply(gridster, ['<li id="fullWidth"></li>', noOfCols, 1]);

function getRealNumberOfWidgets() {
    var onlyOneRow = true;
    var col = 0;
    while (true) {
        gridster.add_widget.apply(gridster, ['<li id="try' + col + '"></li>', 1, 1]);
        if (document.getElementById('try' + col).getAttribute('data-row') > 1) {
            break;
        }
        col = document.getElementById('try' + col).getAttribute('data-col');
    }     
    // remove all temporary widgets 
    for (var i = 0; i <= col; i++) {
        gridster.remove_widget( '#try'+i );
    }
    return col; 
}

@import url("http://gridster.net/dist/jquery.gridster.css");
@import url("http://gridster.net/demos/assets/demo.css");

<script src="http://gridster.net/demos/assets/jquery.js"></script>
<script src="http://gridster.net/dist/jquery.gridster.js"></script>


<div class="gridster">
     <ul></ul>
</div>