Creating a fixed width grid based on pixels instead of percentage.

[cblokker]

I'm trying to create a fixed cell width and height independent of window size. I'd like to create a 20px by 20px grid where each widget can fluidly move up and down in 20px increments. I'm able to get the height fixed by passing cellHeight: 20, but width doesn't seem to work very well. This is what I'm passing into options:

var options = {
      float: true,
      width: 53,
      acceptWidgets: '.grid-stack-item',
      cellHeight: 20,
      verticalMargin: 0,
      disableResize: true,
      alwaysShowResizeHandle: false
  };

  $('#grid-1').gridstack(options);

I tried cellWidth: 20, but that didn't seem to work. I also modified the scss script to be calculated based on px instead of %.

.grid-stack > .grid-stack-item {
  $gridstack-columns: 60;

  @for $i from 1 through $gridstack-columns {
    &[data-gs-width='#{$i}'] { width: $i * 20px; }
    &[data-gs-x='#{$i}'] { left: $i * 20px; }
  }
}

This snaps grid items into the correct 20px grid locations, but horizontal dragging becomes less smooth. Is there something else I need to add to the .scss script so horizontal dragging maps to grid width? Or do I need to do something different for the width or cellWidthparam? I'd like to get away from any % calculations :)

[randellhodges]

@cblokker Did you ever figure out how to do this? I am also looking at how to implement widths based on pixels and not percentages. My won't even snap to the correct places. It seems to be off by a large margin.

[randellhodges]

This is the function that is causing me grief:

    GridStack.prototype.cellWidth = function() {
        return Math.round(this.container.outerWidth() / this.opts.width);
    };

In the case of a pixel based width, along with a css that defines the columns in pixels, I need this function to return only this.opts.width.

I think we would either need some smarts in gridstack to determine what model it was in (% or px) or have a configuration option to tell it what mode.

Edit: It might not be quite as simple as that. I'm playing with it now to see.

Edit 2: My 5 minute fix. It doesn't, at least yet, have a responsive flow to it yet.
Diff: support-pixelwidth

[PonchoPowers]

Would love this, as there is a problem with viewing grids in 4k screens, sometimes you want the web page to be wide, in which case you have to set up a new grid where the sizes are pretty much halved, and then when you resize the page down to a resolution others will use the widths are too narrow.

[ronvanpol]

I too would very much like to see this feature being supported by gridstack

[fheidrich]

Same here, I would love to see that in grid stack.

In the meantime, I was able hack it for my simple use case (one row, disabledOneColumnMode, height=1)
To force all tiles 100px wide (all my tiles are width=1, it should not be hard to do for any width) :
In the CSS

    $tile-width: 100px; /*100px*/
    .grid-stack-item[data-gs-width="1"]  { width: $tile-width; min-width: $tile-width; max-width: $tile-width; }
    .grid-stack-item {
      @for $i from 1 through 20 {
        &[data-gs-x='#{$i}'] { left: $i * $tile-width; }
      }
    }

constructor:

            const width = $('.grid-stack').outerWidth();
            this.grid = $('.grid-stack').gridstack({
                auto: false,
                cellHeight: 80,
                disableResize: true,
                verticalMargin: 0,
                width: Math.round(width/100),
                height: 1,
                disableOneColumnMode: true
            }).data('gridstack');

Reset the width in the resize handler

    resizeHandler() {
        const width = $('.grid-stack').outerWidth();
        const grid = $('.grid-stack').data('gridstack');
        grid.setGridWidth(Math.round(width/100), true);
    }

the hack is to force the cellWidth to 100px (as set in the CSS) by adjusting the width (column count) based on the current grid width (px).

[radiolips]

You can set cellHeight to whatever you want, and you can use Javascript to determine dimensions before creating a container and passing options to gridstack. In this fashion, you can set whatever ratio you want and even set specific pixel-based widths and heights.