CSS Grid如何让自动布局元素忽略固定行列定位项？

问题背景 #

现有HTML结构：

<div id="grid">
    <div class="main-item">Main</div>
</div>

配套CSS：

#grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    text-align: center;
}

#grid > * {
    border: 1px solid blue;
    padding: 20px;
}

#grid > .main-item {
    grid-row: 3;
    grid-column: 3 / 5;
    background: rgba(0, 0, 0, 0.2);
}

通过JS向网格添加25个单元格：

const grid = document.querySelector("#grid");

for (let i = 0; i < 25; i++) {
    const item = document.createElement("div");
    item.innerText = i.toString();
    grid.append(item);
}

当前新增元素会自动绕开.main-item的固定位置，但需求是让这些元素直接填充网格，完全忽略.main-item的存在，无需通过JS逐个设置gridRow和gridColumn。

纯CSS解决方案 #

核心思路是让固定定位的.main-item脱离网格布局流，不再占用单元格空间，这样新增元素会自动填满整个网格，同时保持.main-item在目标位置显示。

修改后的CSS代码：

#grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    text-align: center;
    position: relative; /* 为绝对定位子元素提供定位上下文 */
}

#grid > * {
    border: 1px solid blue;
    padding: 20px;
}

#grid > .main-item {
    grid-row: 3;
    grid-column: 3 / 5;
    position: absolute; /* 脱离网格布局流 */
    background: rgba(0, 0, 0, 0.2);
    z-index: 1; /* 确保固定项显示在其他元素上方 */
    /* 匹配网格单元格尺寸，避免内容溢出 */
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}

原理说明 #

• position: absolute让.main-item脱离网格自动布局流，不再占用单元格位置，新增元素会像它不存在一样填充整个网格。
• 保留grid-row和grid-column可精准定位.main-item在网格中的目标位置，配合父容器的position: relative，它会固定在对应网格区域的左上角。
• width和height用于匹配网格单元格的尺寸，避免内容超出；如果网格列宽是固定值，也可直接设置对应数值。

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