Problem getting dynamic grid allocation function to work

So I’m creating a website that contains rows of cards with information about specific individuals, in the same vein as posts on Instagram, using a grid layout. I’m trying to use Javascript to write a function that ideally takes an input from an SQL database (ie a new entry) and creates a new “post” or card. Each new card should appear first in the table of cards, pushing all other previous cards one column to the right and, if at the end of a row of columns, one row down.

More specifically, in an initial form of the function that only deals with the rearrangement of the cards after input from a button instead of an SQL database:
The function filters through my CSS stylesheet to create a list of CSS rulesets containing a certain keyword “cartelle” (each card corresponds to a separate nth child in the stylesheet, which specifies position only). It then loops through this list, updating the grid-row-start/end & grid-column-start/end values of each ruleset, either incrementing column values by 1 or incrementing row values by 1 if the card is at the end of a column. After the change is made to the existing cards in the CSSOM, a new card, which is a group of nested div, p and img tags, becomes appended to a parent element in the 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;
};

I’m currently struggling to implement this. It seems that no matter what I do, the insertion of the new card causes the layout of the previous to become messed up. I can never get it to function exactly as I want it to. Does anyone have any ideas?

Here is the codepen link for anyone wishing to see CSS & HTML:
Codepen