如何创建支持元素跨多单元格的等尺寸网格布局？

需要实现固定行列数的网格视图，元素通过items数组中的x、y坐标定位，当元素的width或height大于1时，需占据对应数量的单元格（例如w=2则占2列）。尝试多种方法后均未成功：要么跨区功能失效，要么生成多余行。

尝试过的方案及问题 #

CSS Grid方案 #

错误在于将网格项嵌套在额外的<div>中，导致grid-column/row属性失效——这类属性仅对网格容器的直接子元素生效。代码如下：

<div class="grid grid-cols-12 gap-4 grid-flow-col">
    {#each grid as row, i}
        <div> <!-- 嵌套div破坏网格结构 -->
            {#each row as item, j}
                {#if item}
                    <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}>
                    </div>
                {:else}
                    <div class="grid h-10 border border-gray-300"></div>
                {/if}
            {/each}
        </div>
    {/each}
</div>

Table方案 #

问题出在网格填充逻辑：重复渲染了跨区元素的占位单元格，导致colspan/rowspan无法正确合并单元格。代码如下：

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

网格填充函数 #

两种填充逻辑均未正确处理已占用单元格，导致渲染时结构混乱：

// 方案1：重复将元素赋值到所有占用单元格
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;
}

// 方案2：用null标记占位单元格，但未避免重复渲染
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;
}

问题根源 #

1. Grid结构错误：网格项必须是网格容器的直接子元素，嵌套层级会导致Grid布局属性失效。
2. Table结构错误：设置colspan/rowspan后，不需要再渲染被合并的单元格，否则会破坏表格的行列结构。
3. 填充逻辑缺陷：未标记已被占用的单元格，导致渲染时重复处理同一元素的占位位置，引发布局混乱。

可行原生实现方案 #

方案1：修正CSS Grid实现 #

核心思路：直接将元素作为网格容器的子元素，通过grid-column-start/end、grid-row-start/end精确定位，无需提前生成完整网格数组。

<script>
    const cols = 12;
    const rows = 8;
    const items = [
        { x: 0, y: 0, w: 2, h: 2, name: "Item 1" },
        { x: 2, y: 0, w: 1, h: 3, name: "Item 2" },
        // 可添加更多元素
    ];
    const icon = "https://picsum.photos/200";
</script>

<!-- 定义固定行列的网格容器 -->
<div class="grid grid-cols-{cols} grid-rows-{rows} gap-4">
    <!-- 渲染所有元素 -->
    {#each items as item}
        <div 
            class="border border-gray-300 relative overflow-hidden"
            style={`
                grid-column-start: ${item.x + 1}; 
                grid-column-end: ${item.x + item.w + 1}; 
                grid-row-start: ${item.y + 1}; 
                grid-row-end: ${item.y + item.h + 1};
            `}
        >
            <img src={icon} class="w-full h-full object-cover">
            <span class="absolute bottom-0 left-0 bg-black/60 text-white p-1">{item.name}</span>
        </div>
    {/each}
    <!-- 渲染空单元格填充网格 -->
    {#each Array(cols * rows).fill(0) as _, idx}
        {#if !items.some(item => 
            idx >= item.y * cols + item.x && 
            idx < (item.y + item.h) * cols + item.x && 
            idx % cols >= item.x && 
            idx % cols < item.x + item.w
        )}
            <div class="border border-gray-300 bg-gray-50"></div>
        {/if}
    {/each}
</div>

方案2：修正Table实现 #

核心思路：先标记所有被占用的单元格，渲染时仅在元素起始位置渲染带colspan/rowspan的单元格，跳过被占用的位置。

<script>
    const cols = 12;
    const rows = 8;
    const items = [
        { x: 0, y: 0, w: 2, h: 2, name: "Item 1" },
        { x: 2, y: 0, w: 1, h: 3, name: "Item 2" },
        // 可添加更多元素
    ];
    const icon = "https://picsum.photos/200";

    // 生成表格数据并标记已占用单元格
    function buildTableData() {
        const table = Array(rows).fill().map(() => Array(cols).fill(null));
        const occupied = Array(rows).fill().map(() => Array(cols).fill(false));

        items.forEach(item => {
            if (!occupied[item.y][item.x]) {
                table[item.y][item.x] = item;
                // 标记所有被当前元素占用的单元格
                for (let y = item.y; y < item.y + item.h; y++) {
                    for (let x = item.x; x < item.x + item.w; x++) {
                        if (y < rows && x < cols) occupied[y][x] = true;
                    }
                }
            }
        });

        return { table, occupied };
    }

    const { table: gridTable, occupied } = buildTableData();
</script>

<table class="table-fixed w-full border-collapse">
    {#each gridTable as row, y}
        <tr>
            {#each row as item, x}
                {#if item && !occupied[y][x]}
                    <td 
                        colspan={item.w} 
                        rowspan={item.h} 
                        class="border border-gray-300 relative h-16"
                        style="background-image: url({icon}); background-size: cover;"
                    >
                        <div class="absolute inset-0 flex items-center justify-center bg-black/50 text-white">
                            {item.name}
                        </div>
                    </td>
                    <!-- 跳过被colspan占用的列 -->
                    {#each Array(item.w - 1).fill(0) as _}
                        {x += 1}
                    {/each}
                {:else if !occupied[y][x]}
                    <td class="border border-gray-300 h-16 bg-gray-50"></td>
                {/if}
            {/each}
        </tr>
        <!-- 跳过被rowspan占用的行 -->
        {#if row.some(item => item?.h > 1)}
            {#each Array(Math.max(...row.filter(i => i).map(i => i.h)) - 1).fill(0) as _}
                {y += 1}
            {/each}
        {/if}
    {/each}
</table>

解决原理 #

1. CSS Grid方案：利用Grid布局的坐标定位特性，直接通过起始/结束行列控制元素位置与跨度，空单元格通过遍历所有网格位置、过滤已占用单元格生成，无需提前构建完整网格数组。
2. Table方案：通过标记已占用单元格，确保每个跨区元素仅渲染一次，跳过被合并的单元格，避免表格行列结构混乱，保证colspan/rowspan生效。

内容的提问来源于stack exchange，提问作者Mark