Question

当我将 CSS 网格列中的第一列设置为最小百分比时，列宽未观察到最小值。示例：

grid-template-columns: minmax(50%, 75%)  1fr;

有了这些值，当视口变窄时，第一列会继续水平收缩，直到它最终折叠并消失。同样，拉伸屏幕会使第一列逐渐变宽，最终它会比总网格宽度的 3/4 更宽。

（即便如此，两列的比例至多与我想要达到的比例大致相符。）

那么有没有办法让第一列的宽度始终至少是网格宽度的一半，并且永远不会超过 2/3？

注意事项：

Grid-gap 暂时为 0 以避免复杂化百分比计算。
我知道我可以将最小宽度设置为固定数量的像素，从而强制执行最小宽度——该列不会消失。但是随着网格变窄，违反了最大百分比约束。此外，我尽量不使用固定像素宽度。

我的代码（添加网格间隙以显示列边界）：

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

Answer 1

您的原始代码看起来不错。我相信它应该起作用。为什么我不完全清楚。

我要说的是：我们刚到 Grid Level 1。这是全新的技术，因此您应该会遇到一些故障和限制。

例如，在您的 minmax(50%, 75%) 中，曲目将始终默认为 max 值。

minmax() defaulting to max

这删除了 minmax() 在许多布局中作为一个有用的选项，因为许多人想要一个 min 默认值。

为什么最小百分比不起作用？我认为这与父容器的宽度有关（我尝试过的设置都不起作用），或者与网格 track sizing algorithm 有关系。再说一次，不清楚。

所以我跳过了所有这些，以不同的方式向浏览器提供相同的命令。这似乎有效：

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

使用百分比设置网格列的最小和最大宽度

1 个答案: