Setting a dynamic number of rows/ columns in css grid (revised)

Question

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?

Please note obvious flaw here - if :root contained anything already, the preexisting :root value will be ignored since this suggested procedure inserts a "new" :root (or at least one with a higher array value). From playing around with this, the browser only looks at the highest one in the array. What probably should happen is to read the existing :root value if there is one and include that into the new one. But again, i am hoping for a better solution. — edwardsmarkf, Jun 10 '22 at 16:28

edwardsmarkf · Answer 1 · 2022-06-14T17:16:10.410

: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>

Setting a dynamic number of rows/ columns in css grid (revised)

1 Answers1