如何使grid-template-rows的最小高度与grid-template-columns宽度一致？

针对你遇到的问题——让grid-template-rows中minmax()的最小值等于容器宽度的25%（同时避开vw包含滚动条的坑），以下是两种可行的纯CSS方案：

方案1：利用aspect-ratio强制网格项宽高比 #

给网格项设置1:1的宽高比，让行的最小高度自动匹配列宽：

.container {
  display: grid;
  grid-template-rows: repeat(17, minmax(auto, 35vh));
  grid-template-columns: repeat(4, 25%);
}

.container > * {
  aspect-ratio: 1/1; /* 强制宽高1:1，行最小高度会同步列宽 */
  min-height: 0; /* 解除Grid默认的内容溢出限制，确保宽高比生效 */
}

这个方案兼容性好，逻辑简单：网格项的宽度是容器的25%，宽高比1:1意味着高度也等于这个宽度，所以行的最小高度会被网格项的高度撑开，刚好达到你要的效果，同时最大高度被限制为35vh。

方案2：使用容器查询单位cqw #

用容器查询的cqw单位（容器宽度的1%），直接基于容器宽度计算行的最小高度，完全避开滚动条问题：
首先给容器的父元素（比如body）开启容器查询：

body {
  container-type: inline-size;
}

然后修改容器的行模板设置：

.container {
  display: grid;
  grid-template-rows: repeat(17, minmax(25cqw, 35vh));
  grid-template-columns: repeat(4, 25%);
}

cqw是相对于容器的内联尺寸（即宽度）的百分比，不会包含滚动条的宽度，完美匹配你对列宽的设置逻辑。目前现代浏览器都已支持容器查询。

注意事项 #

• 如果你的网格项有内部内容可能撑高，aspect-ratio会优先保证宽高比，内容溢出时可以配合overflow属性处理；
• cqw方案需要确保容器的父元素正确设置了container-type，否则单位不会生效。

内容的提问来源于stack exchange，提问作者R.J.