JavaScript生成的Etch-a-Sketch网格Div高度为0的问题排查

核心问题 #

你的.main-grid-container网格容器没有设置明确的高度值，导致gridTemplateRows里的1fr没有可参考的高度基准——网格布局中1fr是按容器可用空间分配比例，容器本身高度为0的话，所有网格项的高度自然也会变成0，所以页面空白。

解决办法 #

给网格容器设置固定高度或相对高度，让1fr能正常分配空间：

• 方案1：设置固定高度
  在CSS中给.main-grid-container添加高度属性：

  .main-grid-container {
    display: grid;
    height: 500px; /* 可根据需求调整数值 */
  }
  

• 方案2：用宽高比保持正方形
  如果想要画板是正方形，可以用aspect-ratio配合宽度/高度：

  .main-grid-container {
    display: grid;
    width: 500px;
    aspect-ratio: 1 / 1; /* 宽高1:1，自动计算高度 */
  }
  

为什么别人的代码不用单独设div高度 #

那些参考方案里，网格容器本身已经有明确的尺寸（比如通过CSS设置了高度/宽度+宽高比），gridTemplateRows: repeat(${gridSize}, 1fr)会基于容器高度把空间平均分配给每一行，网格项会自动填充对应的网格单元格，所以不需要单独给.grid-item设高度。

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