所以我創建了一個網站，里面有一排排的卡片，上面有特定個人的信息，就像Instagram上的帖子一樣，使用網格布局。我正試圖使用Javascript編寫一個函數，它理想地從SQL數據庫中獲取一個輸入(即一個新條目)并創建一個新的& quot帖子& quot或者卡。每張新牌應該出現在牌桌的第一位，將所有其他以前的牌向右推一列，如果在一行的最后，則向下推一行。

更具體地說，在從按鈕而不是SQL數據庫輸入后僅處理卡片重新排列的函數的初始形式中: 該函數過濾我的CSS樣式表，創建包含某個關鍵字& quot卡特勒& quot(每張卡片對應于樣式表中單獨的第n個子元素，它只指定位置)。然后循環遍歷這個列表，更新grid-row-start/end & amp；grid-column-每個規則集的開始/結束值，如果卡片位于列的末尾，則列值遞增1，行值遞增1。在對CSSOM中的現有卡片進行更改之后，一個新的卡片(一組嵌套的div、p和img標簽)將被附加到DOM中的父元素上。

function adjust(){
const styleSheet = Array.from(document.styleSheets[0].cssRules);
 //filter to create list that contains only cartelle class rulesets 
const myRules = styleSheet.filter(ruleset => ruleset.selectorText.includes("cartelle"))

 //iterate along each ruleset in the list
let cardSetLength = Object.keys(myRules).length;
for (let i = 0; i < cardSetLength; i++)
  {
    
    for (const rule of myRules) 
    {
      let newGridColumn = rule.style.gridColumnStart;
      let newGridRow = rule.style.gridRowStart;
     
      
      if(newGridColumn === '5')
      {
        newGridRow = parseInt(newGridRow) + 1;
        newGridColumn = 2;

        rule.style.setProperty("grid-column-start", newGridColumn);
        console.log(rule.style.gridColumnStart);

        rule.style.setProperty("grid-column-end", newGridColumn + 1);

      }
    
      else
      {
        newGridColumn = parseInt(newGridColumn) + 1;
   

        rule.style.setProperty("grid-column-start", newGridColumn);
        console.log(rule.style.gridColumnStart);//should return 3
        rule.style.setProperty("grid-column-end", newGridColumn + 1);
        
        rule.style.setProperty("grid-row-start", newGridRow);
        rule.style.setProperty("grid-row-end", newGridRow + 1);
        
        console.log(rule.style.gridRowStart);//should return 3
      }
   
    }
      myRules[i].selectorText = `cartelle:nth-child(${i + 2})`;
      console.log(myRules[i].selectorText);// should return "cartelle:nth-child(2);"
      console.log(myRules[i].style);//should return {gird-row-start: 3...}
    }
    //if card is at the end of the last grid column, change row and set column values to first column
    

//create cartelle including: (img, div.text-box, p onclick=popup()) 
const formatRows = document.querySelector(".format-rows");
const fragment = document.createDocumentFragment();

let div1 = document.createElement("div");
div1.setAttribute("class", "cartelle");

let img = document.createElement("img");
img.setAttribute("class", "card-image");

let div2 = document.createElement("div");
div2.setAttribute("class", "text-box");

let p = document.createElement("p");
p.setAttribute("onclick", "popupation()");

p.textContent = "hello world";

fragment.appendChild(div1).appendChild(img).appendChild(div2).appendChild(p);

formatRows.prepend(fragment);

console.log(fragment)//returns empty dict;


let newCardStyle = ".cartelle:nth-child(1) {grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2;}";

const stylesheet2 = document.styleSheets[0];
const index = stylesheet2.cssRules.length;
console.log(stylesheet2.cssRules.length);
stylesheet2.insertRule(newCardStyle, index);
console.log(stylesheet2.cssRules[20].gridRowStart)//returns empty dict;
};

我目前正在努力實現這一點。好像不管我怎么做，新卡的插入導致之前的布局變得亂七八糟。我永遠也不能讓它完全按照我想要的那樣運行。有人有想法嗎？

這里是codepen鏈接，任何人都希望看到CSS & ampHTML: 密碼筆

你的解決方案過于復雜。只需將每張新卡片添加為網格的第一個子元素，您不需要調整任何CSS或重新定位任何東西——這一切都應該是自動的。

注意，我使用insertAdjacentHTML方法來添加每張卡片——這比使用基本的DOM方法createElement、setAttribute、appendChild和insertBefore要容易得多。

let count = 0, interval = null
const grid = document.querySelector('.cards')
const addCard = () => {
  count++
  const hue = Math.floor(Math.random() * 256);
  const s = `<div style="background: hsl(${hue},60%,50%)">${count}</div>`
  grid.insertAdjacentHTML('afterbegin', s)
  if (count == 20) clearInterval(interval)
}
addCard()
interval = setInterval(addCard, 2000)

body {
  margin: 1em;
  font-family: sans-serif;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 1em;
}

.cards>div {
  color: white;
  background: black;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5em;
}

<div class="cards"></div>