我有以下带有 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防止固定元素影响流量修正?
代码笔链接
P粉4404536892023-09-16 11:55:19
您可以给网格一个相对位置,并绝对定位特定网格项。
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>