Estoy tratando de usar un bucle for de JavaScript para generar automáticamente una cuadrícula CSS de 4 por 4. Ninguno de los elementos de la cuadrícula aparece, excepto el fondo azul claro. Estoy usando las funciones appendChild() y setAttribute() en dos bucles separados: uno para filas y otro para columnas. HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="grid-container" id="grid"> </div> <script src="script.js"></script> </body> </html>
JS:
const grid = document.getElementById("grid"); for(let i = 1; i < 5; i++) { for(let x = 1; x < 5; x++) { var item = document.createElement("div"); //item.setAttribute("style", "grid-area:" + i + " / " + x + " / " + i + " / " + x); item.setAttribute("grid-column", x + " / span 1"); item.setAttribute("grid-row", i + " / span 1"); item.setAttribute("class", "grid-item"); grid.appendChild(item); } }
CSS:
.grid-container { display: grid; /*width: 50%; height: 100%;*/ grid-template-columns: 30px 30px 30px 30px; grid-template-rows: 30px 30px 30px 30px; gap: 10px; background-color: lightblue; } #grid-item { background-color: blue; border-style: solid; border-width: 5px; border-color: red; }
En CSS, cambie su atributo establecido de clase a id
item.setAttribute("id", "grid-item");
Porque en css cuando usas # es ID medio pero cuando usas . su clase media
Referencia: https://www.w3schools.com/cssref/css_selectors.asp
Solo tiene que cambiar su css para el elemento de cuadrícula del selector de identificación al selector de clase. es decir,
.grid-item { background-color: blue; border-style: solid; border-width: 5px; border-color: red; }