.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来做到这一点?
考虑新的容器查询功能及其新单位。滚动条不会有问题
.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>