在 CSS 网格中设置动态行数/列数（修订）答案

【问题标题】：Setting a dynamic number of rows/ columns in css grid (revised)在 CSS 网格中设置动态行数/列数（修订）
【发布时间】：2022-06-15 01:16:10
【问题描述】：

根据我的研究，似乎设置 CSS 网格最终值的最佳方法是指定它，或者创建/操作 css :root 值。

一个非常相似的问题是asked here，但这些答案现在已经有好几年了。通过使用“嵌套网格”，Ducks 的答案看起来最好，虽然操作 :root 变量看起来更干净。

下面是我正在努力实现的工作示例。我正在创建一个随机值并在完成后使用 css 变量 --ending 相应地设置 CSS grid-row-end 值。

CSS 网格现在有办法做到这一点吗，比如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 解决了这个问题吗？

【问题讨论】：

请注意这里的明显缺陷 - 如果 :root 已经包含任何内容，则预先存在的 :root 值将被忽略，因为此建议的过程会插入一个“新” :root （或至少一个具有更高数组值的）。通过玩这个，浏览器只查看数组中最高的一个。可能应该发生的是读取现有的 :root 值（如果有的话）并将其包含到新的值中。但同样，我希望有更好的解决方案。

标签： javascript css css-grid

【解决方案1】：

:root 在其他解决方案中被操纵，但是，这似乎是一个可行的解决方案（如下）。
应该有一些 CSS 方法可以做到这一点，但这似乎足够干净。

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>

【讨论】：