How to make angular-gridster2 responsive when changing device resolution?

I’m using the "^11.2.0" version of angular-gridster2 and Angular 11x.

I managed to do part of the code apparently, however, maxCols is having problems.

What problem occurs?

The first entry into the grid is correct, it shuffles the widgets (gridster-item) correctly according to the size of the display, however, if I return to the original resolution it no longer shuffles them correctly, it puts one under the other, like if there was no space.

Where do I want to get to?

I want the widgets to be responsive and fluid, however, they need to have a maximum of specific cols and rows for my grid, for example, the same as Binance or Kraken.

MY CODE:

export class GridWorkspaceTraderComponent implements OnInit, OnDestroy {
    @ViewChild("gridster") gridster: GridsterComponent;

    protected _destroy$: Subject<void> = new Subject<void>();

    showGridsterItems: boolean = true;
    data: IGridsterItem[] = [];
    options: GridsterConfig = {
        gridSizeChangedCallback: (gridster: GridsterComponentInterface) => this._updateGridsterItemPosition(gridster),
        gridType: GridType.Fixed,
        compactType: CompactType.None, // DON'T TOUCH
        displayGrid: DisplayGrid.Always,
        fixedColWidth: 290, // change grid size
        fixedRowHeight: 231, // change grid size
        margin: 8,
        outerMarginTop: 56,
        outerMarginBottom: 16,
        outerMarginRight: 16,
        outerMarginLeft: 16,
        maxItemCols: 200,
        maxItemRows: 200,
        minItemArea: 0,
        maxItemArea: 240,
        minCols: 1,
        minRows: 1,
        swap: false,
        pushItems: false,
        scrollToNewItems: true,
        disableScrollHorizontal: true,
        disableScrollVertical: false,
        disableWindowResize: false,
        disablePushOnDrag: true,
        disablePushOnResize: false,
        resizable: { enabled: true },
        draggable: {
            enabled: true,
            start: (_: unknown, dragRef: GridsterItemComponentInterface): void => dragRef.bringToFront(1),
            stop: (_: unknown, itemComponent: GridsterItemComponentInterface): void => itemComponent.sendToBack(1),
        },
    };

    protected _getItemType({
        type,
        positionY,
        positionX,
        securitySymbol,
        selectedTabIndex,
    }: {
        type: TWorkspaceBackendMainGridsterItem;
        positionY: number;
        positionX: number;
        securitySymbol: string;
        selectedTabIndex: TWorkspaceBackendServiceSelectedTab;
    }): IGridsterItem {
        return {
            type,
            id: '',
            cols: 1, // change size based in col
            rows: type.toUpperCase() === "X" || type.toUpperCase() === "Y" || type.toUpperCase() === "Z" ? 2 : 1, // change size based in widget 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: true,
            compactEnabled: true,
        };
    }

    protected _updateGridsterItemPosition(gridster: GridsterComponentInterface): void {
        const CLIENT_WIDTH: number = gridster?.el?.clientWidth;
        const NEW_COLUMNS: number = Math.floor(CLIENT_WIDTH / this.options.fixedColWidth);

        if (NEW_COLUMNS !== this.options.maxCols) {
            this.options.minCols = NEW_COLUMNS;
            // this.options.maxCols = NEW_COLUMNS;

            if (this.options.api) {
                this.options.api.optionsChanged();
            }

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

}