How to keep a Fixed grid responsive?

Question

I need that, according to the increase, decrease of zoom in the user's browser or any act that generates an action of changing the size of the grid, my gridster-items follow the same.

What Happens Today?

Today, as I set a number of maxItemCols and maxItemRows, the gridster-items are "disappearing" when zooming out, and "appearing" when zooming in.

The only way I've found to do this is by using the

gridType: GridType.VerticalFixed

But this type when changing the size of the grid, it does not keep my fixedColWidth and fixedRowHeight which I fixed.

Currently I use version: "angular-gridster2": "^11.2.0", for angular 11x.

OPTIONS CODE

options: GridsterConfig = {
    gridSizeChangedCallback: (gridster: GridsterComponentInterface) => this._updateGridsterItemPosition(gridster),
    gridType: GridType.VerticalFixed,
    compactType: CompactType.None, // DON'T TOUCH
    displayGrid: DisplayGrid.None,
    fixedColWidth: 290, // change grid size
    fixedRowHeight: 231, // change grid size
    margin: 8,
    outerMarginTop: 16,
    outerMarginBottom: 16,
    outerMarginRight: 40,
    outerMarginLeft: 40,
    maxItemCols: 200,
    maxItemRows: 200,
    minCols: 1,
    minRows: 1,
    scrollToNewItems: true,
    disableScrollHorizontal: true,
    disableScrollVertical: false,
    disableWindowResize: false,
    disablePushOnDrag: false,
    disablePushOnResize: false,
    resizable: { enabled: false },
    draggable: {
      enabled: true,
      start: (item: GridsterItem, dragRef: GridsterItemComponentInterface, event: MouseEvent) => dragRef.bringToFront(1),
      stop: (item: GridsterItem, itemComponent: GridsterItemComponentInterface, event: MouseEvent) => itemComponent.sendToBack(1)
    },
  };

  private _updateGridsterItemPosition(gridster: GridsterComponentInterface): void {
    const CLIENT_WIDTH: number = gridster.el.clientWidth;
    let newColumns: number =  Math.floor(CLIENT_WIDTH / this.options.fixedColWidth);

    if (newColumns !== this.options.maxCols) {
      this.options.minCols = newColumns;
      this.options.maxCols = newColumns;
      this.options.api.optionsChanged();

      gridster.grid.forEach((comp: GridsterItemComponent) => this.gridster.autoPositionItem(comp));
    }
  }

GRIDSTER-ITEM CODE

 private _getItemType(
    type: TWorkspaceBackendMainGridsterItem,
    ID: string,
    positionY: number,
    positionX: number,
    securitySymbol: string,
    tabIndex: number,
    tabSelected: TWorkspaceBackendMainGridsterItem
  ): IGridsterItem {
    const GRIDSTER_ITEM: IGridsterItem = {
      type: 'tools',
      id: ID,
      cols: 1, // change size based in col
      rows: 1, // change size based in row
      minItemCols: 1, // change size based in max col
      minItemRows: 1, // change size based in max row
      y: positionY, // item position
      x: positionX, // item position
      dragEnabled: true,
      resizeEnabled: false,
      compactEnabled: false,
      index: tabIndex || 1,
      data: {
        symbol: securitySymbol || '',
        selectedTab: tabSelected
      }
    };
  }