Building a css grid with javascript: creating elements, storing them in arrays and append them to other elements - css-grid

Question

I recently build an masonry gallery with html and css. I used the display: grid; property to make it look like so. Now I am trying to create randomized layouts. Therefor I want to create elements with classes. I want to append / elements to the elements, store those elements inside an array and later append them inside my "masonry" . I put in different console.logs to see whats happening, but I get some either weird or undefined returns. Javascript can be as tricky as it can be fun for beginners, so I hope you guys can help me out.
Thank you all. :)
//arrays and variables
const figures = [];
let newFigures = "";
const divs = [];
let newDivs = "";
function makeCells(){
for(let i = 0; i < 33; i++){
newFigure = document.createElement("figure");
figures[i] = newFigure.classList.add("cell", "cell--" + i);
newDiv = document.createElement("div");
divs[i] = newDiv.setAttribute("id", i);
console.log("log1: " + newFigure.classList);
console.log("log2: " + figures[i]);
}
console.log("log3: " + divs);
console.log("log4: " + figures);
console.log("log5: " + divs);
for(let i=0; i<3; i++){
figures[i] = newFigure.appendChild(newDiv);
}
console.log("figures = " + figures);
console.log("divs = " + divs);
let z = {};
for(let i=0; i<3; i++){
z = figures[i];
document.getElementById("masonry").appendChild(z);
}
console.log(document.getElementById("masonry"));
}
Here is a picture of the corresponding console.logs.
Console Logs
This works as intended:
const figures = [];
let newFigure = "";
const divs = [];
let newDiv = "";
function makeCells(){
for(let i = 0; i < 33; i++){
newFigure = document.createElement("figure");
newDiv = document.createElement("div");
newFigure.appendChild(newDiv);
document.getElementById("masonry").appendChild(newFigure);
figures[i] = newFigure.classList.add("cell", "cell--" + i);
}
console.log(document.getElementById("masonry"));
}
Sorry to bother you guys.

Answer 1

I don't like this line of code, mainly because the add() method does not have a return value.
figures[i] = newFigure.classList.add("cell", "cell--" + i);
I would split it into two statements.
newFigure.classList.add("cell", "cell--" + i);
figures.push(newFigure);