I am trying to display groups of tiles (or in GridStack.js terminology, a list of grid stacks), where tiles have one of few predetermined sizes.

My project should be displaying 3 tiles/"grid items" (one green (large) and one magenta/red (wide) in the left group (one below the other), and one another blue (small) in the right group). More specifically, something like:

image 1

But in my project it displays that instead (resulting into almost not visible tiles):

image 2

In the example below, it displays nothing (but I've inspected it to see and the grid stack items are there).

Worth noting I use position: relative in the grid stacks (.TileGroup.grid-stack). If I remove that property, the tiles (or grid stack items) display very large. I am also doing width: 100%; height: 100%; inside the grid stack item contents.

Here is some code:

I am assuming cell height determines the width and height of the smallest tiles/"grid items" in the grids.

const gridstack = GridStack.init({
    alwaysShowResizeHandle: false,
    disableResize: false,
    margin: `${margin}rem`,
    maxRow: options.direction == "horizontal" ? 6 : undefined,
    rtl: localeDir == "rtl",
    cellHeight: `${small_size.height}rem`,
    acceptWidgets(el) {
        return div_ref.current!.contains(el);
    },
}, group_element);

// Add gridstack widget
const widget_element = gridstack.addWidget({
    x: tile.x,
    y: tile.y,
    w: get_tile_columns(tile.size),
    h: get_tile_rows(tile.size),
});

Here, get_tile_columns() returns a value from 1-4

/**
 * Gets width of tile size in small tiles unit.
 */
function get_tile_columns(size: TileSize): number
{
    return size == "large" ? 4 : size == "wide" ? 4 : size == "medium" ? 2 : 1;
}

/**
 * Gets height of tile size in small tiles unit.
 */
function get_tile_rows(size: TileSize): number
{
    return size == "large" ? 4 : size == "wide" ? 2 : size == "medium" ? 2 : 1;
}

Note: I apologize, but I could not provide a Stack Snippet because GridStack uses ES2015 module export in the CDN and I get an error indicating that GridStack is not defined therefore.

Here is a minimal reproducible example