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

Question

我正在使用GridStack.js库，我必须使用它来实现键盘。问题是，如果我让屏幕宽度(在Chrome DevTools中)小于800-1000px，那么所有的网格元素都会将它们的宽度更改为100% (尽管它们以前不是这样的)。这里的例子是https://gridstackjs.com/#demo，所以我猜这个库中有一些最小的height元素。或者整个.grid-stack元素具有最小宽度，如果宽度小于最小宽度，则所有.grid-stack-item的宽度为: 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列，那么这个元素就是...and。但是如果我将列数改为24，那么元素就会变成一个矩形(尽管config中的宽度和高度是相等的)。我希望单元格的高度和宽度始终相等。

请提供一种更好的方法来设置GridStack元素的最小高度和宽度，以使其适应屏幕宽度。

Answer 1

初始化时：

const grid = GridStack.init(options);

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

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