CSS Grid如何设置动态行列数 是否支持grid-row-end:max属性

截至目前，CSS Grid 已经原生支持你需要的「元素自动跨到隐式网格最后一行」的能力，不需要手动计算行数、操作CSS变量，标准中也没有你提到的max这类特殊取值，直接用负索引就能实现效果。

具体实现说明 #

• 给需要跨全部行的元素设置grid-row: 1 / -1即可，新版规范下的-1不再仅指向显式定义的网格最后一条线，会自动对齐到包含隐式生成轨道在内的整个网格的最末端线。
• 唯一需要注意的生效前提：要跨全高/全宽的元素必须放在网格容器的子元素最前面，优先于所有会触发隐式网格创建的动态元素，浏览器才能在布局计算阶段正确把它延伸到网格最底部。
• 目前该特性已经在所有主流现代浏览器落地（Chrome 113+、Firefox 112+、Safari 16.4+），覆盖绝大多数用户场景。如果需要兼容更旧的浏览器版本，你目前使用的CSS变量传行数的方案依旧是成本最低的兼容方案，比嵌套网格实现简洁很多。

调整后的可运行示例 #

完全不需要JS操作CSS变量，直接用原生Grid能力就能实现需求：

CSS代码 #

.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%;
}
/* 第一列跨全高，不需要依赖CSS变量 */
.first-col {
  grid-row: 1 / -1;
}

HTML代码 #

<div id='grid' class="wrapper">
    <!-- 跨全高的元素放在最前面 -->
    <div class="box first-col">First Col</div>
</div>

JavaScript代码 #

'use strict;'
const maxNbrOfRows = 6;
window.onload = () => {
    const nbrOfRows = Math.floor(Math.random() * maxNbrOfRows) + 1;
    const grid = document.getElementById('grid');
    for ( let i=1; i <= nbrOfRows; i++ ) {
        const tag = document.createElement('div');
        tag.append('row ' + i);
        tag.classList.add('box');
        tag.style.gridColumnStart = '2';
        grid.append(tag);
    }
    // 不需要再插入规则修改:root变量
}

内容的提问来源于stack exchange，提问作者edwardsmarkf