如何让具有自动调整功能的 CSS Grid 的最后一列缩小到 minmax 的最小值以下？答案

【问题标题】：How to let the last column of a CSS Grid with auto-fit shrink bellow the min value of minmax?如何让具有自动调整功能的 CSS Grid 的最后一列缩小到 minmax 的最小值以下？
【发布时间】：2020-01-26 11:38:24
【问题描述】：

我正在使用以下 CSS 网格布局：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

这会尝试尽可能多地容纳 500 像素的列，然后将剩余空间平均分配给列。

问题是，当只剩下一列时（网格宽度

我尝试了很多组合，包括嵌套 minmax 函数，但无法解决这个问题。

【问题讨论】：

标签： css css-grid

【解决方案1】：

您可以使用vw 单元在您的元素上考虑max-width。只需注意 maring/padding/border 即可识别正确的值。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.grid>span {
  border: 2px solid red;
  height: 50px;
  max-width:100vw;
  box-sizing:border-box;
}

body {
 margin:0;
}

<div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

【讨论】：

【解决方案2】：

我认为这会有所帮助

grid-template-columns: repeat(5,500px);

【讨论】：

这会创建 5 个 500 像素的列，但不能解决问题。我想保留 auto-fit 和 minmax 的行为，它们会根据需要创建尽可能多的列并将它们均匀地分布在网格上。
我希望每列至少为 500 像素，并让它们增长到占据网格的整个宽度。 grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); 工作得很好，只是它可以防止列在只有一列时缩小。