css grid-template-rows 不能按预期工作（大小不随 fr 改变）答案

【问题标题】：css grid-template-rows doesn't work as expected (size doesn't change with fr)css grid-template-rows 不能按预期工作（大小不随 fr 改变）
【发布时间】：2021-05-06 04:06:21
【问题描述】：

我想将 5 x 5 的画布放在一个 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>

css 主要：

 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 grid-template-rows: 5.61671fr 1fr 1fr 1fr 1fr 1fr 5.61671fr; // 5.616 is the buffer
 display: grid;

 overflow-y: scroll;
 overflow-y: auto;

 width: 100%;
 height: 100%;

画布：

 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，我的画布的高度不会改变。

我认为它与 object-fit:cover / object-fit:fit 有关。我必须改变什么，以便如果缓冲区变大，画布的宽度会变小，同时仍然显示啸叫图像？

tyvm

【问题讨论】：

你想让你的画布占用 5x5 吗？但是那你为什么把他们的容器设置得比那个小呢？你希望那幅画布怎么样？彼此相邻还是在下方？
我想在我的主 div 中放置 25 个画布。 5 行，5 列彼此相邻，但在它们的顶部和下方都有一个缓冲区（空白区域）
它们的比例应该取决于缓冲区。大缓冲区 => 小高度，宽度 = div.width / 5
好的，所以你的 html 就像 25 imgDiv 具有不同的设置和上下缓冲。所以基本上你的网格是 7 行 5 列，因为第一列和最后一列是缓冲区？
是的，我的问题现在解决了。主要问题是我必须调整画布的宽度/高度以及调整我的网格模板。由于某种原因，我的浏览器不允许我的画布被“压”成以下大约 w/h 的比例：2:1

标签： html css canvas css-grid

【解决方案1】：

我建议你使用网格模板：

  grid-template:
    "b1 b1 b1 b1 b1"
    ". . . . ."
    ". . . . ."
    ". . . . ."
    ". . . . ."
    ". . . . ."
    "b2 b2 b2 b2 b2";

演示

.main{
  /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 5.61671fr 1fr 1fr 1fr 1fr 1fr 5.61671fr; /* 5.616 is the buffer*/
  grid-template:
    "b1 b1 b1 b1 b1"
    ". . . . ."
    ". . . . ."
    ". . . . ."
    ". . . . ."
    ". . . . ."
    "b2 b2 b2 b2 b2";
  display: grid;
  overflow-y: scroll;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
canvas{
   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%;
}
/* ADDED */
.imgDiv:nth-of-type(2) canvas{
  background:red;
}
.imgDiv:nth-of-type(3) canvas{
  background:blue;
}
.imgDiv:nth-of-type(4) canvas{
  background:orange;
}
.imgDiv:nth-of-type(5) canvas{
  background:purple;
}
.imgDiv:nth-of-type(6) canvas{
  background:pink;
}
.imgDiv:nth-of-type(7) canvas{
  background:pink;
}
.imgDiv:nth-of-type(8) canvas{
  background:purple;
}
.imgDiv:nth-of-type(9) canvas{
  background:yellow;
}
.imgDiv:nth-of-type(10) canvas{
  background:pink;
}
.imgDiv:nth-of-type(11) canvas{
  background:red;
}
.imgDiv:nth-of-type(12) canvas{
  background:blue;
}
.imgDiv:nth-of-type(13) canvas{
  background:red;
}
.imgDiv:nth-of-type(14) canvas{
  background:purple;
}
.imgDiv:nth-of-type(15) canvas{
  background:orange;
}
.imgDiv:nth-of-type(16) canvas{
  background:blue;
}
.imgDiv:nth-of-type(17) canvas{
  background:red;
}
.imgDiv:nth-of-type(18) canvas{
  background:blue;
}
.imgDiv:nth-of-type(19) canvas{
  background:orange;
}
.imgDiv:nth-of-type(20) canvas{
  background:purple;
}
.imgDiv:nth-of-type(21) canvas{
  background:pink;
}
.imgDiv:nth-of-type(22) canvas{
  background:pink;
}
.imgDiv:nth-of-type(23) canvas{
  background:red;
}
.imgDiv:nth-of-type(24) canvas{
  background:blue;
}
.imgDiv:nth-of-type(25) canvas{
  background:orange;
}
.imgDiv:nth-of-type(26) canvas{
  background:yellow;
}

.buff-1, .buff-2{
  height: 50px;
  background: salmon;
}
.buff-1{
  grid-area:b1;
}
.buff-2{
  grid-area:b2;
}

<div class="main">
  <div class="buff-1"></div>
  <div class="imgDiv">
       <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
       <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
       <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
       <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
       <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
       <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="imgDiv">
     <canvas class="canvas"/>
  </div>
  <div class="buff-2"></div>
 </div>

【讨论】：