Según mi investigación, parece que la mejor manera de establecer el valor final de una cuadrícula CSS es especificarla o crear/manipular el valor css :root .
Aquí se hizo una pregunta muy similar, pero estas respuestas ahora tienen varios años. La respuesta de Ducks se ve mejor usando una "cuadrícula anidada", aunque la manipulación de la variable :root parece más limpia.
a continuación se muestra un ejemplo práctico de lo que estoy tratando de lograr. Estoy creando un valor aleatorio y configurando el valor grid-row-end CSS en consecuencia usando una variable --ending , que finaliza al finalizar.
¿La cuadrícula CSS ahora tiene una forma de hacer esto, algo así como css-row-end: max ?
'use strict;' const maxNbrOfRows = 6; window.onload = () => { const nbrOfRows = Math.floor(Math.random() * maxNbrOfRows) + 1; for ( let i=1; i <= nbrOfRows; i++ ) { let tag = document.createElement('div'); let text = document.createTextNode('row ' + i.toString() ); tag.appendChild(text); tag.classList.add('box'); tag.style.gridColumnStart = '2'; let element = document.getElementById('grid'); element.appendChild(tag); } // hack the css :root value document.styleSheets[0].insertRule(':root { --ending: ' + nbrOfRows.toString() + '; }'); } .wrapper { display: grid; grid-template-columns: 150px 100px; grid-gap: 10px; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 151%; } <div id='grid' class="wrapper"> <div style='grid-row-end: span var(--ending);' class="box">First Col</div> </div>¿Css-grid ya ha abordado esto?
:root estaba siendo manipulado en otras soluciones, sin embargo, esta parece ser una solución funcional (abajo).
Debería haber alguna forma CSS de hacer esto, pero esto parece lo suficientemente limpio.
document.documentElement.style.setProperty('--ending', nbrOfRows.toString() ); 'use strict;' const maxNbrOfRows = 8; window.onload = () => { const nbrOfRows = Math.floor(Math.random() * maxNbrOfRows) + 1; for ( let i=1; i <= nbrOfRows; i++ ) { let tag = document.createElement('div'); let text = document.createTextNode('row ' + i.toString() ); tag.appendChild(text); tag.classList.add('box'); tag.style.gridColumnStart = '2'; let element = document.getElementById('grid'); element.appendChild(tag); } document.documentElement.style.setProperty('--ending', nbrOfRows.toString() ); // stupid! document.styleSheets[0].insertRule(':root { --ending: ' + nbrOfRows.toString() + '; }'); } .wrapper { display: grid; grid-template-columns: 150px 100px; grid-gap: 10px; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 151%; <div id='grid' class="wrapper"> <div style='grid-row-end: span var(--ending);' class="box a">First Col</div> </div>