Creating a grid with same cell size but image can take multiple cells?

I thought I am trying to do something simple, but I can't figure out how to do it.I will provide the playground link at the end: I want to create a grid like view where we have a given amount of cells. In my example I have the row and cols amount defined at the top.With that I have an items array and want to place them by x,y in the grid.IF an item has width or height greater than 1, it should take more cells -> w=2 means 2 cells.

In some solutions I have the same item multiple times in the array but I couldn't figure out how to group, later I have a new array with placeholders which also seems weird.

I tried to solve this with flex, grid and tables, have all my "ideas" in one playground that you see what I tried. I even tried different ideas in filling the array, but I suppose that's not a solution.

I commented all ideas, nearly all the time the "spanning" isn't working, or if you check the last two it's creating more rows, but it... shouldn't. IF you need more information, please write.

Here is a svelte playground - you can find 6 ideas below each other separated by === and comments:https://svelte.dev/repl/4680996be33d4c429d1c0eedf8f0b6a5?version=4.2.15(I noticed that the grid doesn't work in the playground on initial click, so just enter a space in the editor, then it's loading correctly).

I hope somebody can give me a working solution. It doesn't have to be responsive, but ideal it should be smaller but that's probably a problem for later, for now the spanning is just broken and I can't figure out why...I actually want to understand the problem and the solution, so just using a grid library isn't my goal here. I also don't need drag & drop functionality.

Grid idea:

<div class="grid grid-cols-12 gap-4 grid-flow-col">    {#each grid as row, i}<div>            {#each row as item, j}                {#if item}<!-- style here not working as it's not a child of grid --><div class="grid h-10 border border-gray-300" style="grid-column: span {item.w || 1}; ; grid-row: span {item.h || 1};"><img src={icon}><!-- {item.name} --></div>                {:else}<div class="grid h-10 border border-gray-300"></div>                {/if}            {/each}</div>    {/each}</div>

Table idea:

<table class="table-fixed w-full h-full">{#each gridTable as row, i}<tr>        {#each row as item, j}            {#if item && item.name === 'empty'}<td class="h-10 border border-gray-300"><div class="h-full w-full border border-gray-200"></div></td>            {:else if item}<td colspan={item.w} rowspan={item.h} class="relative border border-gray-300" style="background-image: url({icon}); background-size: cover;"><div class="absolute inset-0 flex items-center justify-center">                       {item.name} {item.x},{item.y}</div></td>            {/if}        {/each}</tr>{/each}</table>

Oh, and I tried to fill the grid either with:

function createGrid2() {    for (let item of items) {        grid[item.x][item.y] = item;        for (let i = item.y ; i < item.y + item.h; i++) {            for (let j = item.x ; j < item.x + item.w; j++) {                grid[j][i] = item;            }        }    }    return grid;}

or

function createGridNull() {    for (let item of items) {        gridNull[item.x][item.y] = item;        for (let i = item.y; i < item.y + item.h; i++) {            for (let j = item.x; j < item.x + item.w; j++) {                if (i !== item.y || j !== item.x) {                    gridNull[j][i] = null;                }            }        }    }    return gridNull;}