0
157
Vistas¿Cómo puedo hacer que estos divs crezcan para llenar el tamaño de su contenedor?
Estoy tratando de escribir una función que tome la entrada de un usuario para crear una cuadrícula (16x16, 32x32, etc.). El problema que tengo es hacer que los divs adjuntos se escalen correctamente al contenedor.
esto es lo que parece: 
function createGrid(input) { const gridContainer = document.querySelector('.gridContainer'); for (let i = 0; i < input; i++) { const row = document.createElement('div'); row.className = 'row'; for (let j = 1; j <= input; j++) { const pixel = document.createElement('div'); pixel.className = 'pixel'; row.appendChild(pixel); } gridContainer.appendChild(row); } } body { height: 100vh; } .pixel { flex: 1; min-width: 8px; min-height: 8px; border: 0.1px solid black; } .gridContainer { display: flex; flex-direction: row; width: 600px; height: 600px; border: 2px solid red; flex-wrap: wrap; justify-content: center; align-content: center; align-items: stretch; } <div class="gridContainer"> </div> <input class="gridSize" type="number">Pensé que agregar flex 1 con un ancho y una altura mínimos a los divs funcionaría, así que debo estar perdiéndome algo aquí. (Soy un novato, así que me disculpo de antemano si es una solución súper fácil).
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Creo que este es el CSS que estás buscando:
body { height: 100vh; } .row { width: 100%; height: 100%; display: flex; flex-direction: column; } .pixel { flex: 1; min-width: 8px; min-height: 8px; border: 0.1px solid black; } .gridContainer { display: flex; flex-direction: row; width: 600px; height: 600px; border: 2px solid red; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; } En resumen, hay algunos ajustes con respecto a las clases .gridContainer y .row .
·
Juan Pablo Isaza
Denunciar
Responde la pregunta