How I get real number of columns in gridster?

Question

I want to get the real number of columns in gridster. The number of columns is changing depending on resolution of the browser. My target is, to set a widget on maximum width.

The option max_cols returns not the real number of columns.

My current solution is not good:

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>