如何减少 GridStack 网格元素的最小高度和重量？

问题描述

我正在使用 GridStack.js 库，我必须使用它来实现键盘。问题是，如果我将屏幕宽度（在 Chrome DevTools 中）设置为小于 800-1000 像素，那么所有网格元素的宽度都会更改为 100%（尽管它们以前不是这样）。示例在这里 https://gridstackjs.com/#demo 所以我猜这个库中有某些最小高度元素。或者整个 .grid-stack 元素具有最小宽度，如果宽度小于最小宽度，则所有 .grid-stack-items 获得宽度：100%。所以问题是如何解决这个问题并设置我自己的最小高度。我可以使用此代码更改宽度：

.grid-stack>.grid-stack-item {

  $gridstack-columns: 12; // here I can set columns number

  min-width: (100% / $gridstack-columns);

  @for $i from 1 through $gridstack-columns {
    &[gs-w='#{$i}'] {
      width: (100% / $gridstack-columns) * $i;
    }

    &[gs-x='#{$i}'] {
      left: (100% / $gridstack-columns) * $i;
    }

    &[gs-min-w='#{$i}'] {
      min-width: (100% / $gridstack-columns) * $i;
    }

    &[gs-max-w='#{$i}'] {
      max-width: (100% / $gridstack-columns) * $i;
    }
  }
}

但即使我改变了列数并且我的元素在宽度上变小了，高度仍然和以前一样。

如果我的配置是这样的：

grid.load([{ "w": 1,"h": 1 }]);

...我有 12 列，那么这个元素是方形的。但是，如果我将列数更改为 24，则元素变为矩形（尽管配置中的宽度和高度相等）。我希望单元格的高度和宽度始终相等。

请提供一种更好的方法，如何设置 GridStack 元素的最小高度和宽度，以保持它们适应屏幕宽度。

解决方法

初始化时：

const grid = GridStack.init(options);

您需要将这些添加到选项中：

const options = {
        cellHeight: 50,cellWidth: 50,disableOneColumnMode: true
      };

gridstack javascript jquery