大量的网格列/行是性能问题吗？

Question

有一个包含许多小行和列的网格，如下所示：

项目将被放置在其中，例如：

网格是用类似的东西创建的：

grid-template-rows: repeat(auto-fill, 10px);
grid-template-columns: repeat(auto-fill, 10px);

• 网格的宽度可以和浏览器窗口一样宽，比如 2000 像素。
• 高度可以是多个屏幕，比如 10000 像素。
• 轨道对用户不可见，上图仅用于演示 CSS 网格布局的外观。
• 可能有数百个“项目”（上图中的灰色区域），每个项目占据一定数量的单元格（可以是 1x1 项目，也可以是 60x40 项目）

问题

• 这是性能问题吗？浏览器生成几百列几千行的网格是否昂贵？
• 如果是，有没有办法优化repeat(auto-fill, 10px)？也许应该使用百分比来代替 ( repeat(auto-fill, 1%))，或者用什么来代替auto-fill?

或者最好通过 JavaScript 执行此操作（高度到容器，左/上到项目）？