Estoy haciendo una cuadrícula cuadrada de 16 x 16 en Javascript y tengo dos bucles for que están creando divs para la cuadrícula. Estoy asignando cada fila para que sea un contenedor flexible y las celdas internas para que sean cajas flexibles. En lugar de que los divs se muestren como una cuadrícula, se muestran como un montón de celdas, una debajo de la otra. Además, los bordes tampoco se muestran correctamente, así que intenté agregar una nueva clase, llamada filas para que se muestren, pero eso no funcionó. ¿Alguien tiene alguna sugerencia sobre por qué esto no funciona?
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>A tus clases de CSS les falta el . al principio:
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>