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

【问题标题】：How to decrease minimal height and weight of a GridStack grid element?如何减少 GridStack 网格元素的最小高度和重量？
【发布时间】：2023-03-15 00:01:01
【问题描述】：

我正在使用 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 元素的最小高度和宽度，以保持它们适应屏幕宽度。

【问题讨论】：

标签： javascript jquery gridstack

【解决方案1】：

初始化时：

const grid = GridStack.init(options);

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

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

【讨论】：