J'ai le code HTML suivant avec grille CSS
<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); }
La partie importante est que .main-item
a une position fixe dans la grille.
J'ajoute maintenant 25 cellules à la grille.
const grid = document.querySelector("#grid"); for (let i = 0; i < 25; i++) { const item = document.createElement("div"); item.innerText = i.toString(); grid.append(item); }
Le problème est que je veux que ces éléments ignorent la position de .main-item
的位置(將其視為不存在)。不過(guò),CSS 目前已對(duì)此進(jìn)行了糾正,并使元素圍繞 .main-item
(le traitent comme s'il n'existait pas). Cependant, CSS corrige actuellement cela et fait circuler l'élément
style.gridRow
和 style.gridColumn
Je peux corriger cela en définissant
item.style.gridRow = (Math.floor(i / 5) + 1).toString(); item.style.gridColumn = ((i % 5) + 1).toString();Existe-t-il un moyen de faire cela sans configurer tous les autres éléments dans JS?? Existe-t-il du CSS pour empêcher les éléments fixes d'affecter la correction du flux??
Lien du stylo code??
Vous pouvez donner à la grille une position relative et positionner de manière absolue des éléments spécifiques de la grille.
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>