I am making a 16 x 16 square grid in Javascript and have two for loops that are creating divs for the grid. I'm assigning each row to be a flex-container and the cells inside to be flex boxes. Instead of the divs showing up as a grid, they are showing up as a bunch of cells, one under the other. Also, the borders are not showing properly too - so I tried adding a new class, called rows to get them to show, but that didn't work. Does anyone have any suggestions on why this is not working?
let board = document.getElementById("board");
let row;
let column;
for (let j = 0; j < 16; j++) {
row = document.createElement("div");
row.className = "flex-container";
row.innerHTML = '';
board.appendChild(row);
for (let i = 0; i < 16; i++) {
column = document.createElement("div");
column.className = 'flexBoxes';
column.classList.add = "rows";
column.innerHTML = 'a';
row.appendChild(column);
}
}flex-container {
display: flex;
flex-direction: row;
width: 100%;
}
rows {
background-color: pink;
border-color: black;
border-style: solid;
border-width: 2px;
}
flexBoxes {
flex: 1;
border-color: black;
border-style: solid;
border-width: 2px;
max-width: 20px;
clear: both;
}<div id="board"></div>Your CSS classes are missing the . at the start:
let board = document.getElementById("board");
let row;
let column;
for (let j = 0; j < 16; j++) {
row = document.createElement("div");
row.className = "flex-container";
row.innerHTML = '';
board.appendChild(row);
for (let i = 0; i < 16; i++) {
column = document.createElement("div");
column.className = 'flexBoxes';
column.classList.add = "rows";
column.innerHTML = 'a';
row.appendChild(column);
}
}.flex-container {
display: flex;
flex-direction: row;
width: 100%;
}
.rows {
background-color: pink;
border-color: black;
border-style: solid;
border-width: 2px;
}
.flexBoxes {
flex: 1;
border-color: black;
border-style: solid;
border-width: 2px;
max-width: 20px;
clear: both;
}<div id="board"></div>