Html css网格模板行不'；未按预期工作（尺寸不随fr变化）

我想把5x5画布放在一个div中，并用css网格将它们定位，在上/下各有一个缓冲区。以下是我尝试的：

这就是它们的用途：

 <div class="main"> 
      <div class="imgDiv" grid-column-start="1" grid-row-start="2";>
           <canvas class="canvas">
      </div>
      <div class="imgDiv" grid-column-start="1" grid-row-start="3">
           <canvas class="canvas">
      </div>
  ...    
 </div>
 
 

画布：

 height: 100%;
 width: 100%;
 object-fit: fill;

 margin: 0%;
 padding: 0%;

imgDiv：

position: relative;
height: 100%;
width: 100%;
object-fit: cover;
margin: 0%;
padding: 0%;

所以我注意到，我不理解的是，如果我将缓冲区增加到例如10fr，画布的高度不会改变

我认为这与物体的适合度有关：封面/物体的适合度：适合度。 如果缓冲区变大，画布的宽度会变小，同时仍然显示嚎叫图像，那么我需要做什么改变

---

tyvm

我建议您使用网格模板：

网格模板：
“b1”
". . . . ."
". . . . ."
". . . . ."
". . . . ."
". . . . ."
“b2”；

演示

.main{
/*网格模板柱：1fr 1fr 1fr 1fr 1fr；
网格模板行：5.61671fr 1fr 1fr 1fr 1fr 561671FR；/*5.616是缓冲区*/
网格模板：
“b1”
". . . . ."
". . . . ."
". . . . ."
". . . . ."
". . . . ."
“b2”；
显示：网格；
溢出y：滚动；
溢出y：自动；
宽度：100%；
身高：100%；
}
帆布{
身高：100%；
宽度：100%；
对象匹配：填充；
利润率：0%；
填充：0%；
}
伊姆格迪夫先生{
位置：相对位置；
身高：100%；
宽度：100%；
对象匹配：覆盖；
利润率：0%；
填充：0%；
}
/*增加*/
.imgDiv：第n种类型（2）画布{
背景：红色；
}
.imgDiv：第n种类型（3）画布{
背景：蓝色；
}
.imgDiv：第n种类型（4）画布{
背景：橙色；
}
.imgDiv：第n种类型（5）画布{
背景：紫色；
}
.imgDiv：第n种类型（6）画布{
背景：粉红色；
}
.imgDiv：第n种类型（7）画布{
背景：粉红色；
}
.imgDiv：第n种类型（8）画布{
背景：紫色；
}
.imgDiv：第n种类型（9）画布{
背景：黄色；
}
.imgDiv：第n种类型（10）画布{
背景：粉红色；
}
.imgDiv：第n种类型（11）画布{
背景：红色；
}
.imgDiv：第n种类型（12）画布{
背景：蓝色；
}
.imgDiv：第n种类型（13）画布{
背景：红色；
}
.imgDiv：第n种类型（14）画布{
背景：紫色；
}
.imgDiv：第n种类型（15）画布{
背景：橙色；
}
.imgDiv：第n种类型（16）画布{
背景：蓝色；
}
.imgDiv：第n种类型（17）画布{
背景：红色；
}
.imgDiv：第n种类型（18）画布{
背景：蓝色；
}
.imgDiv：第n种类型（19）画布{
背景：橙色；
}
.imgDiv：第n种类型（20）画布{
背景：紫色；
}
.imgDiv：第n种类型（21）画布{
背景：粉红色；
}
.imgDiv：第n种类型（22）画布{
背景：粉红色；
}
.imgDiv：第n种类型（23）画布{
背景：红色；
}
.imgDiv：第n种类型（24）画布{
背景：蓝色；
}
.imgDiv：第n种类型（25）画布{
背景：橙色；
}
.imgDiv：第n种类型（26）画布{
背景：黄色；
}
.buff-1、.buff-2{
高度：50px；
背景：鲑鱼；
}
.buff-1{
网格面积：b1；
}
.buff-2{
网格面积：b2；
}

您想让画布拍摄5x5？但是为什么你要把他们的容器设置得比这个小呢？你希望那块画布是什么样的？相邻还是在下方？我想在我的主分区中放置25个画布。5行，5列都相邻，但上面和下面有一个缓冲区（空白），它们的比例应取决于缓冲区。大缓冲区=>small height，width=div.width/5ok，因此您的html就像25

imgDiv

，具有不同的设置和上下缓冲区。所以基本上你们的网格是7行5列，因为第一列和最后一列是缓冲区？是的，我的问题现在解决了。主要的问题是我必须调整画布的宽度/高度以及调整网格模板。由于某些原因，我的浏览器不允许我的画布“按”成以下比例，即w/h:2:1

position: relative;
height: 100%;
width: 100%;
object-fit: cover;
margin: 0%;
padding: 0%;