我有以下帶有CSS網(wǎng)格的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);
}

重要的是。主項(xiàng)目在網(wǎng)格中有固定的位置。

我現(xiàn)在向網(wǎng)格中添加25個(gè)單元格。

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

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

問(wèn)題是我希望這些元素忽略。主項(xiàng)目(就像它不存在一樣對(duì)待它)。然而，CSS目前糾正了這一點(diǎn)，并流動(dòng)的元素。主項(xiàng)目。我想要下面的次要行為:

我可以通過(guò)在JavaScript中設(shè)置style.gridRow和style.gridColumn來(lái)進(jìn)行更正

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

有沒(méi)有一種方法可以做到這一點(diǎn)，而不用在JS中設(shè)置所有其他元素？是否有CSS來(lái)防止固定元件影響流量校正？

代碼筆鏈接

您可以給網(wǎng)格一個(gè)相對(duì)位置，并絕對(duì)定位特定的網(wǎng)格項(xiàng)目。

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>