Tengo un div secundario que es un css gird (que está siendo creado por js que cambiará en la entrada de los usuarios) que quiero ajustar al 100% de acuerdo con la altura y el ancho fijos de los divs principales. ¿Cómo procedo con esto?
.container es el div padre aquí. Quiero que sea de un tamaño fijo y que el .grid-container se ajuste al tamaño de .containers
var count = 32; for (var i = 0; i < count; i++) { const container = document.querySelector('#grid-container'); const content = document.createElement('div'); content.classList.add('grid-item'); container.appendChild(content); } .grid-item { background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; } .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill); height: 100%; } .container { width: 400px; height: 400px; border: 15px solid green; } <div class="container"> <div class="grid-container" id="grid-container"> </div> </div>Si lo entiendo bien, simplemente cambie los valores de ancho y / o altura del contenedor de píxeles "fijos" a porcentajes ...
.container{ width: 100%; height: 100%; border: 15px solid green;}