如何设置CSS Grid列宽度与最大宽度？实现菜单17.5%宽且上限250px

你的需求完全可行！问题出在对minmax()函数的逻辑理解，或者说你还没触发到它的最大值场景，这里给你两种清晰的解决方案：

为什么当前代码没达到预期？ #

minmax(最小值, 最大值)的规则是：列的宽度会在两个值之间浮动，只有当容器足够宽，使得17.5%的计算值超过250px时，菜单列才会停在250px；如果容器宽度小于 250px / 0.175 ≈ 1428.57px，17.5%的计算值会小于250px，这时候菜单列就会一直使用17.5%的宽度——这就是你现在看到的情况。

方案1：用clamp()实现最直观的效果 #

clamp(最小值, 首选值, 最大值)函数完美匹配你的需求：首选宽度为17.5%，当这个值超过250px时自动取250px，容器较小时则保持17.5%的比例。修改后的代码如下：

body { margin: 0; padding: 0; }
.container {
  display: grid;
  grid-template-columns: clamp(0, 17.5%, 250px) minmax(31.25%, 480px) auto;
  grid-template-rows: 100vh;
  grid-gap: 0;
}
.menu {
  padding-top: 32px;
  background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view { background-color: #F5F5FC; }

注：把clamp的第一个参数0换成你能接受的最小宽度（比如120px），可以避免菜单在极小容器下变得过窄。

方案2：结合min()和minmax() #

如果你坚持想用minmax()，可以嵌套min()函数来取17.5%和250px中的较小值，再用minmax()确保列的弹性：

.container {
  display: grid;
  grid-template-columns: minmax(0, min(17.5%, 250px)) minmax(31.25%, 480px) auto;
  /* 其他样式不变 */
}

补充说明 #

如果你实际需求是菜单列至少保持17.5%宽度，最多不超250px，那你原来的minmax(17.5%, 250px)写法是正确的，只是需要把容器宽度拉到1428px以上才能看到250px的效果。但从你的描述来看，前者（默认17.5%，最大250px）更符合你的预期。

内容的提问来源于stack exchange，提问作者klaasjansen