当我将CSS网格列中的第一列设置为最小百分比时，列宽不会达到最小。例：
grid-template-columns: minmax(50%, 75%) 1fr;
使用这些值，当视口变窄时，第一列将保持水平缩小，直到最终折叠并消失为止。同样，拉伸屏幕会使第一列随着您的移动而变宽，从而最终使其比总网格宽度的3/4宽。
（即使如此，在最大网格宽度下，两列的比例确实大致对应于我要实现的目标。）
那么，有没有一种方法可以使第一列的宽度始终至少为网格宽度的一半，并且永远不超过2/3？
笔记：
我的代码（添加了grid-gap以显示列边界）：
.wrapper {
display: grid;
grid-template-columns: minmax(50%, 75%) 1fr;
grid-gap: 1px;
padding: 10px;
background-color: #219643;
}
.item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}<div class="wrapper">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
</div>您的原始代码看起来不错。我相信它应该起作用。为什么不这样做对我来说并不完全清楚。
我会这样说：我们只是在Grid Level 1上。这是一项全新的技术，因此您应该期待一些故障和限制。
例如，在中minmax(50%, 75%)，轨道将始终默认为该max值。
minmax()由于许多人都希望使用min默认设置，因此这在许多布局中不再是有用的选项。
最低百分比为何不起作用？我认为这与父容器的宽度（我尝试过的任何设置都没有关系）有关，或者与网格轨迹调整算法有关。同样，还不清楚。
因此，我只是跳过了所有内容，以不同的方式为浏览器提供了相同的命令。这似乎可行：
.wrapper {
display: grid;
grid-template-columns: minmax(50%, 1fr) 25%;
grid-gap: 1px;
padding: 10px;
background-color: #219643;
}
.item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}<div class="wrapper">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句