在 CSS 網格中設置動態行數/列數（修訂）

Question

根據我的研究，似乎設置 CSS 網格最終值的最佳方法是指定它，或者創建/操作 css :root值。

這里提出了一個非常相似的問題，但這些答案現在已經有好幾年了。 通過使用“嵌套網格”，鴨子的答案看起來最好，盡管操縱:root變量似乎更干凈。

下面是我想要實現的一個工作示例。 我正在創建一個隨機值並相應地使用 css 變量設置 CSS --ending 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 已經解決了這個問題嗎？

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