创建一个单元格大小相同但图像可以包含多个单元格的网格？

Question

我以为我正在尝试做一些简单的事情，但我不知道该怎么做。 我将在最后提供游乐场链接：我想创建一个类似网格的视图，其中我们有给定数量的单元格。在我的示例中，我在顶部定义了行和列的数量。 这样我就有了一个项目数组，并希望将它们按 x,y 放置在网格中。 如果某个项目的宽度或高度大于 1，则它应该占用更多单元格 -> w=2 表示 2 个单元格。

在某些解决方案中，我在数组中多次拥有相同的项目，但我不知道如何分组，后来我有一个带有占位符的新数组，这看起来也很奇怪。

我尝试用弹性、网格和表格来解决这个问题，将我所有的“想法”集中在一个操场上，你会看到我尝试过的。我什至尝试了不同的想法来填充数组，但我认为这不是解决方案。

我评论了所有的想法，几乎所有的时间“跨越”都不起作用，或者如果你检查最后两个它会创建更多的行，但它......不应该。如果您需要更多信息，请写信。

这里是一个简洁的游乐场 - 您可以在下面找到 6 个想法，每个想法之间用 === 和注释分隔： https://svelte.dev/repl/4680996be33d4c429d1c0eedf8f0b6a5?version=4.2.15 （我注意到网格在初次单击时在操场上不起作用，因此只需在编辑器中输入一个空格，然后它就会正确加载）。

我希望有人能给我一个可行的解决方案。它不必具有响应能力，但理想情况下它应该更小，但这可能是以后的问题，目前跨度刚刚损坏，我不明白为什么...... 我实际上想了解问题和解决方案，因此仅使用网格库并不是我的目标。我也不需要拖放功能。

网格理念：

   <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 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>

哦，我尝试用以下内容填充网格：

    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;
}

或

    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;
}

Answer 1

如果你有精确的坐标，你可以直接将元素放置在所需的位置。如果您还想以某种方式填充剩余的单元格，则可能需要根据现有项目以编程方式确定这些单元格。

<div class="grid grid-cols-12 gap-4 grid-flow-col">
    {#each items as item}
        <div class="grid h-10 border border-gray-300"
            style="
                grid-column: {item.x} / span {item.w ?? 1};
                grid-row: {item.y} / span {item.h ?? 1};
            ">
            {item.name}
        </div>
    {/each}
</div>

REPL