GridStackJS结合NgxSpinner构建Dashboard时加载组件全屏适配问题

针对你遇到的加载层在GridStack组件中无法始终铺满容器的问题，可以通过以下CSS调整来解决：

• 强制grid-stack-item-content始终相对定位并撑满父容器：

.grid-stack-item-content {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

• 调整NgxSpinner的定位，让它基于父容器铺满并居中：

.ngx-spinner-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 可选，添加半透明白背景增强视觉效果 */
}

.ngx-spinner {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• 如果你用的是Angular组件内样式，需要加::ng-deep穿透样式隔离：

::ng-deep .grid-stack-item-content {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

::ng-deep .ngx-spinner-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

原理说明：GridStack的item容器在尺寸变化时，默认样式可能导致内容容器的定位或尺寸异常，强制设置相对定位和100%宽高能确保内容容器始终撑满GridStack项。将NgxSpinner从全局定位改为基于内容容器的绝对定位后，就能跟随容器尺寸变化自动铺满，无论组件放大还是缩小都能正常显示全屏加载层。

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