How to get grid-template-rows to have same length as grid-template-columns?

Question

.container {
  display: grid;

  // I WANT THE MIN TO BE THE SAME 25% AS FOR THE COLUMNS
  grid-template-rows: repeat(17, minmax(WHAT GOES HERE?, 35vh));

  // 25% WIDTH COLUMNS
  grid-template-columns:
    repeat(4, 25%);
}

I'm not using vw because it includes the scrollbar so these % widths are based on the body container (that does not include the scrollbar).

Ive been unable to get the min of the row height to be equal to the width of the columns (25% of the width of the container).

Is there any way to do this without javascript?

Answer 1

Consider the new container query feature and their new unit. You won't have issue with scrollbar

.wrapper {
  container-type: inline-size; /* an extra wrapper with inline-size */
}

.container {
  display: grid;
 
  /* we use 25% of container inline size (cqi) */
  grid-template-rows: repeat(17, minmax(25cqi, 35vh));
  grid-template-columns: repeat(4, 25cqi);
  outline: 1px solid;
}

.container > div {
  border: 2px solid red;
}

<div class="wrapper">
 <div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>