动态网格布局卡片插入功能故障求助：新卡片致布局混乱

我正在开发一个采用Grid布局、类似Instagram帖子形式的个人信息卡片网站，需要实现功能：接收SQL数据库新条目后生成新卡片，新卡片置于最前方，原有卡片依次右移，行尾卡片自动换行下移。

目前用按钮触发测试，思路是：

• 从CSS样式表筛选含"cartelle"关键字的规则集（每个卡片对应:nth-child规则，仅定义位置）
• 遍历更新规则的grid-row-start/end、grid-column-start/end值：列值为5时行值+1、列值重置为2，否则列值+1
• 修改CSSOM后，在DOM中添加嵌套div、p、img标签的新卡片

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

插入新卡片后原有卡片布局混乱，无法实现预期的右移、换行效果，求解决方案。

核心问题是手动修改:nth-child定位规则的逻辑完全混乱，且这种方式维护成本极高。Grid本身自带流式布局能力，完全不需要手动控制每个卡片的位置，换思路即可解决：

1. 简化CSS布局 #

删除所有给:nth-child写死位置的规则，给容器设置自动流式Grid：

.format-rows {
  display: grid;
  /* 每行显示5个卡片，自动均分宽度 */
  grid-template-columns: repeat(5, 1fr);
  /* 卡片间距根据需求调整 */
  gap: 10px;
  /* 卡片自动填充行 */
  grid-auto-flow: row;
}

.cartelle {
  /* 卡片默认占1行1列，无需写死位置 */
  grid-row: span 1;
  grid-column: span 1;
}

2. 简化JavaScript逻辑 #

无需修改CSSOM，直接在容器最前插入新卡片，Grid会自动完成挤开原有卡片、换行的操作：

function adjust(){
  const formatRows = document.querySelector(".format-rows");
  
  // 创建新卡片元素
  const card = document.createElement("div");
  card.className = "cartelle";
  
  const img = document.createElement("img");
  img.className = "card-image";
  // 可添加默认占位图地址
  img.src = "placeholder-image-url";
  
  const textBox = document.createElement("div");
  textBox.className = "text-box";
  
  const text = document.createElement("p");
  text.onclick = popupation; // 直接绑定事件，比setAttribute更可靠
  text.textContent = "hello world";
  
  // 正确组装层级：card包含img和textBox（同级）
  textBox.appendChild(text);
  card.appendChild(img);
  card.appendChild(textBox);
  
  // 插入到容器最前面
  formatRows.prepend(card);
}

3. 修复原代码的其他问题 #

• 元素层级错误：原代码用链式appendChild导致text-box变成img的子元素，不符合卡片结构
• CSSOM修改逻辑冗余：循环中每个规则被重复修改多次，定位完全错乱，完全没必要这么做
• 事件绑定方式不佳：setAttribute("onclick")不如直接赋值onclick属性或用addEventListener

修改后新卡片插入最前，原有卡片会自动按Grid流式布局右移，行满后自动换行，完全符合需求且代码简洁易维护。

内容的提问来源于stack exchange，提问作者fafottos