如何在gridstack.js中配置网格组件间距？

直接给组件加margin:10px无效，是因为GridStack的布局计算依赖自身的配置项，正确的实现方式有两种：

1. 使用GridStack内置配置项（推荐） #

GridStack提供了margin（统一设置水平/垂直间隙）或marginX/marginY（分别设置水平/垂直间隙）配置项，初始化网格时直接传入即可：

修改你的Grid初始化代码：

let grid = GridStack.init({
  cellHeight: 70,
  acceptWidgets: true,
  removable: '#trash', // drag-out delete class
  margin: 10 // 设置所有方向的间隙为10px
});

如果需要水平和垂直间隙不同，改用marginX和marginY：

let grid = GridStack.init({
  cellHeight: 70,
  acceptWidgets: true,
  removable: '#trash',
  marginX: 10, // 水平间隙10px
  marginY: 15  // 垂直间隙15px
});

2. 用CSS覆盖样式（需同步配置） #

如果必须通过CSS调整，需要确保GridStack的配置和CSS样式一致，避免布局计算冲突：

首先添加CSS样式：

.grid-stack-item {
  margin: 10px !important;
}

同时在初始化时设置对应的margin值，保证GridStack的布局计算和CSS匹配：

let grid = GridStack.init({
  cellHeight: 70,
  acceptWidgets: true,
  removable: '#trash',
  margin: 10
});

完整修改后的代码示例 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Advanced grid demo</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="demo.css" />

  <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>

  <!-- support for IE -->
  <script src="../dist/es5/gridstack-poly.js"></script>
  <script src="../dist/es5/gridstack-all.js"></script>

  <style type="text/css">
    .grid-stack-item-removing {
      opacity: 0.8;
      filter: blur(5px);
    }
    #trash {
      background: rgba(255, 0, 0, 0.4);
    }
  </style>
</head>

<body>
  <h1>Advanced Demo</h1>
  <div class="row">
    <div class="col-md-2 d-none d-md-block">
      <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
        <div>
          <ion-icon name="trash" style="font-size: 300%"></ion-icon>
        </div>
        <div>
          <span>Drop here to remove!</span>
        </div>
      </div>
      <div class="newWidget grid-stack-item">
        <div class="grid-stack-item-content" style="padding: 5px;">
          <div>
            <ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
          </div>
          <div>
            <span>Drag me in the dashboard!</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-10">
      <div class="grid-stack"></div>
    </div>
  </div>

  <script type="text/javascript">

    let grid = GridStack.init({
      cellHeight: 70,
      acceptWidgets: true,
      removable: '#trash', // drag-out delete class
      margin: 10 // 添加间隙配置
    });
    GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });

    let items = [
      {x: 0, y: 0, w: 4, h: 2, content: '1'},
      {x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
      {x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
      {x: 10, y: 0, w: 2, h: 2, content: '4'},
      {x: 0, y: 2, w: 2, h: 2, content: '5'},
      {x: 2, y: 2, w: 2, h: 4, content: '6'},
      {x: 8, y: 2, w: 4, h: 2, content: '7'},
      {x: 0, y: 4, w: 2, h: 2, content: '8'},
      {x: 4, y: 4, w: 4, h: 2, content: '9'},
      {x: 8, y: 4, w: 2, h: 2, content: '10'},
      {x: 10, y: 4, w: 2, h: 2, content: '11'},
    ];
    grid.load(items);
    
    grid.on('added removed change', function(e, items) {
      let str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });
  </script>
</body>

</html>

内容的提问来源于stack exchange，提问作者Márcio Valim