Ich habe das folgende HTML mit CSS-Raster

 
Main
 

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

Der wichtige Teil ist, dass.main-itemeine festePositionim Raster hat.

Ich füge jetzt 25Zellenzum Raster hinzu.

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

Das Problem ist, dass ich möchte, dass diese Elemente die Position von.main-item的位置（将其视为不存在）。不过，CSS 目前已对此进行了纠正，并使元素围绕.main-itemignorieren (es so behandeln, als ob es nicht existierte). Allerdings korrigiert CSS dies derzeit und sorgt dafür, dass das Element umherfließt

. Ich möchte das folgende sekundäre Verhalten:

style.gridRow和style.gridColumnIch kann dies korrigieren, indem ich

in JavaScript einstelle

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

Gibt es eine Möglichkeit, dies zu tun, ohne alle anderen Elemente in JS einzurichten? Gibt es CSS, um zu verhindern, dass feste Elemente die Flusskorrektur beeinflussen?

Codestift-Link

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

 
Main