var saveGrid = function () {
    var data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
        el = $(el);
        var node = el.data('_gridstack_node');
        return {
            x: node.x,
            y: node.y,
            width: node.width,
            height: node.height
    }, this);
    $.cookie("grid-layout", JSON.stringify(data)); //Saving in a cookie
    return false;
LoadGrid function modified:
var loadGrid = function () {
    //I remove the "grid.removeAll"
    if(typeof $.cookie("grid-layout") !== 'undefined') { //I'm making sure a cookie has been saved
        var data = JSON.parse($.cookie("grid-layout")); //Getting the content
        var items = $('.grid-stack').find('.grid-stack-item'); //An item is now a grid-stack-item
        $.each(items, function (key, gridItem) { //Foreach item, i'll set the attributs as saved
            $(gridItem).attr('data-gs-x', data[key].x);
            $(gridItem).attr('data-gs-y', data[key].y);
            $(gridItem).attr('data-gs-width', data[key].width);
            $(gridItem).attr('data-gs-height', data[key].height);
        }, this);
    return false;
Hope it will help !
          
@radiolips I had the same "issue" but I think what happens is what you wanted to design.

When we call the loadGrid function, it clears the grids (they are now empty) and reformat them as described in the serializedData.

The problem we both encountered is that we had some content in our grids (that was cleared when we called the load function).

This is why I wrote a solution to this problem, with a new loadGrid function that rearrange the existing grids (and doesn't erase them).

(I'm french, I hope what I said was clear enough)
          
The example provided on the main gridstack page is only an example. It's missing several possible widget properties. It's also missing all of the content of the widget, which I think is what @timrabbetts is referring to.
The example is provided to avoid too many repeated questions about the topic of serialization. The example, however, does not cover all scenarios. In this situation, the developer needs to handle retaining this information.
I'm closing this ticket out, but if anyone is trying to serialize something and is having a problem, please include a jsfiddle and I'll do my best to help.
          
So come back to this and the problem is the example for save and load wipes the current grid out, and if you just update the properties like data-gs-width, after the grid is loaded when you drag an item the entire grid resets.  Its a bit of a hack but I worked around this with the following code.  I think the confusion here is I am loading an html page with all the widgets and the content, then triggering some js to load the grid dimensions, not expecting that when that happens the grid content gets wiped, a simple update example could solve this but for now this works.
        // Go through all widgets and store there content first.
        $('.grid-stack > .grid-stack-item:visible').each(function () {
          markup[$(this).attr('id')] = $('.grid-stack-item-content', this).html();
        // As per demo load the grid, problem is it wipes previous grid contents.
        var grid = $('.grid-stack').data('gridstack');
        grid.removeAll();
        grid.batchUpdate();
        $.each(data, function( id, node ) {
          grid.addWidget($('<div class="grid-stack-item" id="' + id + '"><div class="grid-stack-item-content"></div></div>'), node);
        grid.commit();
        // Load markup back.
        $('.grid-stack > .grid-stack-item:visible').each(function () {
          $('.grid-stack-item-content', this).html(markup[$(this).attr('id')]);
          
@timrabbetts, from a quick read, have you tried using update() with your new dimension and the latest code (make sure to batch/commit) using the latest code ?  (see https://jsfiddle.net/adumesny/jqhkry7g)

It should work, if not re-open this bug with an updated jsfiddle. thanks.