如何在GridStack中将网格列数从12改为8并消除剩余空白？

以下是针对性的解决步骤，按顺序排查即可：

• 确保初始化配置正确设置列数
  不要只改CSS，必须在GridStack初始化时明确指定column参数为8，这是核心配置项：

  import { GridStack } from 'gridstack';
  
  ngAfterViewInit() {
    const gridEl = document.getElementById('grid-container');
    if (gridEl) {
      const grid = GridStack.init({
        column: 8,
        cellHeight: 100,
        gap: 10
      }, gridEl);
    }
  }
  

• 调整容器宽度适配8列
  GridStack默认容器宽度是基于12列设计的，修改列数后需要重置容器宽度：

  #grid-container {
    width: 100%;
    max-width: unset; /* 移除可能存在的最大宽度限制 */
  }
  

  如果需要固定宽度，可通过CSS动态计算：

  #grid-container {
    /* 假设单列基础宽度120px，间隙10px */
    width: calc(8 * 120px + 7 * 10px);
  }
  

• 覆盖GridStack的CSS变量
  GridStack通过CSS变量控制列布局，在全局或组件样式中覆盖默认变量：

  .grid-stack {
    --grid-stack-columns: 8;
  }
  

  若使用Angular组件样式且开启了视图封装，可通过:host确保样式作用到容器：

  :host ::ng-deep .grid-stack {
    --grid-stack-columns: 8;
  }
  

• 强制触发重新布局
  如果修改后布局未更新，手动调用GridStack的布局方法：

  // 假设grid是之前初始化的实例
  grid.update({ column: 8 });
  grid.layout();
  

内容的提问来源于stack exchange，提问作者Darshan Mulani