From my research, it seems to appear that best way to set the final value of a CSS grid is to either specify it, or create/manipulate the css :root value.
A very similar question was asked here but these answers are now several years old. Ducks answer looks the best by using a "nested grid", although manipulating the :root variable seems cleaner.
below is a working example of what i am trying to achieve. i am creating a random value and setting the CSS grid-row-end value accordingly using a css variable --ending upon completion.
does the CSS grid now have a way to do this, something like a 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>Has css-grid addressed this yet?
:root was being manipulated in other solutions, however, this appears to be a working solution (below).
There should be some CSS way of doing this, but this seems clean enough.
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>