css grid-template-rows doesn't work as expected (size doesn't change with fr)

Question

I want to place 5 x 5 canvas in a div and position them with css grid with a buffer on top/bottom. Here is what i tryed:

This is how they are palced:

 <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 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
 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%;

So what i noticed and what i don't understand is that the height of my canvas doesn't change if i increase the buffer to for example 10fr.

I think it has somthing to do with object-fit: cover / object-fit: fit. What do i have to change, so that if the buffer gets bigger the width of the canvas gets smaler while still showing the howl image?

tyvm

Answer 1

I would advise you to use grid-template:

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

DEMO

 .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>