Estoy tratando de crear una cuadrícula de 4 x 4 de 16 cuadrados (divs). He hecho el contenedor div con una pantalla de cuadrícula. Los 16 cuadrados están en filas, pero cuando trato de hacer 4 columnas, aparece tachado en la pestaña de estilos de las herramientas de desarrollo.
Esto es lo que tengo en mi CSS:
html,body{ height: 100%; margin: none; } #heading{ height: 250px; } #wrapper{ width: 600px; height: 600px; margin-left: auto; margin-right: auto; } #container{ border: solid 1px; display: grid; grid-template-columns: 25%, 25%, 25%, 25%; height: 600px; width: auto; } .squares{ border: solid 1px rgba(0, 0, 0, 0.3); }Los 16 divs secundarios se crean con JS. ¿Tendría eso un impacto en por qué la red no funciona como se esperaba?
let x = 0; do{ const square = document.createElement("div"); square.className = "squares"; square.setAttribute("id","block"); document.getElementById("container").appendChild(square); x++; } while(x < 16);No es necesario el , entre los valores grid-template-columns . También puede cambiarlo a auto en lugar de hacer el cálculo usted mismo si son todos iguales y especificar 25% . echa un vistazo ahora
let x = 0; do{ const square = document.createElement("div"); square.className = "squares"; square.setAttribute("id","block"); document.getElementById("container").appendChild(square); x++; } while(x < 16); html,body{ height: 100%; margin: none; } #heading{ height: 250px; } #wrapper{ width: 600px; height: 600px; margin-left: auto; margin-right: auto; } #container{ border: solid 1px; display: grid; grid-template-columns: auto auto auto auto; height: 600px; width: auto; } .squares{ border: solid 1px rgba(0, 0, 0, 0.3); } <div id="container"> </div>Las comas interfieren con grid-template-columns , si lo hace:
grid-template-columns: 25% 25% 25% 25%;debería solucionar el problema mencionado