CSS Grid行数达数百时底部偶现间隙的解决方法咨询

• 当Grid的行数超过几百行时，底部有时会出现间隙，间隙大小和行数多少没有直接关联。比如1100行时底部存在小间隙，将行数增至1300时间隙消失，增至1400时间隙再次出现。
• 我可以用绝对定位解决这个问题，但窗口尺寸变化时需要重新渲染采用绝对定位的UI组件。我需要大量行的原因是要将一天按分钟划分并放置事件，希望浏览器窗口尺寸变化时，事件大小能自动调整且无需重渲染UI组件，因此希望通过Grid解决该问题。

示例代码 #

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      #grid {
        display: grid;
        grid-template-rows: repeat(1100, 1fr);
        height: 100vh;
      }
      #container {
        grid-row: 900 / span 200;
        background-color: gray;
      }
    </style>
  </head>

  <body>
    <div id='grid'>
      <div id='container'>
        Container
      </div>
    </div>
  </body>
</html>

示例截图 #

补充说明 #

• 后续发现是自身失误：示例中grid-row应设为901而非900，但Chrome仍显示底部有间隙，不过网格实际已占满全屏高度。

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