0
199
Views¿Hay alguna manera de cambiar el tamaño de los cuadros de cuadrícula?
Tengo una aplicación de reacción en la que estoy creando alrededor de un millón de cuadros de cuadrícula, todos los cuadros deben caber en la pantalla inmediata (quiero que cada cuadro sea pequeño). Estoy usando js para calcular la altura y el ancho de cada cuadro en relación con la cantidad de cuadros.
var numOfBoxes = 1000 // this number can change anytime var [height, width] = `${100/numberOfBoxes}%`Creé la cuadrícula usando un CSS que encontré en StackOverflow
#root { width: 100vw; height: 100vh } // I tried to use vh and vw to make the #root element fit the initial screen .square-container { display: flex; height: 100%; width: 100%; flex-wrap: wrap; } .square { position: relative; flex-basis: calc(25% - 10px); margin: 5px; border: 1px solid; box-sizing: border-box; } .square::before { content: ''; display: block; padding-top: 100%; } .square .content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } Pero los cuadrados siguen siendo del mismo tamaño cuando trato de aumentar o disminuir numOfBoxes . Intenté cambiar la altura y el ancho de DevTools pero fue en vano.
Se ve así si renderizo 100 cajas o 1000 
¿Alguien me puede apuntar en la dirección correcta?
1 answers
Answer question0
Puede agregar una variable CSS al elemento raíz, usarla como parte de la clase de cuadrícula y luego actualizarla con setProperty .
// Using a setTimeout for this demo, but you would // be adding this to your render method I expect function changeWidth(width, count = 1) { document.documentElement.style.setProperty('--square-width', `${width}px`); if (count < 5) setTimeout(changeWidth, 2000, width +=5, ++count) } changeWidth(5); :root { --square-width: 10px } .container { display: grid; grid-template-columns: repeat(3, var(--square-width)); grid-gap: 5px; } .container div { background-color: red; aspect-ratio: 1; } <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>