如何使网格模板行与网格模板列具有相同的长度？

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

我没有使用 vw，因为它包括滚动条，因此这些％宽度基于主体容器（不包括滚动条）。

我无法使行高的最小值等于列的宽度（容器宽度的 25%）。

有没有什么方法可以不用javascript来做到这一点？

Answer 1

考虑新的容器查询功能及其新单位。滚动条不会有问题

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