Mischen Sie das automatische Rasterlayout mit festen Spalten und Spaltenpositionen

Question

Ich habe das folgende HTML mit CSS-Raster

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

Der wichtige Teil ist, dass .main-item eine feste Position im Raster hat.

Ich füge jetzt 25 Zellen zum 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-item ignorieren (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🎜

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>