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

问题描述 投票:0回答:1
.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来做到这一点?

css css-grid minmax
1个回答
0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.