將網格自動佈局與固定行列位置混合

Question

我有以下有 CSS 網格的 HTML

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

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

重要的部分是 .main-item 在網格中具有固定的位置。

我現在在網格上新增 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 的位置（將其視為不存在）。不過，CSS 目前已對此進行了修正，並使元素圍繞 .main-item 流動。我想要以下次要行為：

我可以透過在 JavaScript 中設定 style.gridRow 和 style.gridColumn 來修正

item.style.gridRow = (Math.floor(i / 5) + 1).toString();
item.style.gridColumn = ((i % 5) + 1).toString();

有沒有一種方法可以做到這一點而不用在 JS 中設定所有其他元素？有沒有CSS防止固定元素影響流量修正？

程式碼筆連結

Answer 1

您可以給網格一個相對位置，並絕對定位特定網格項目。

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

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

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

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

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