如何让具有自动调整功能的CSS网格的最后一列缩至minmax的最小值？

Question

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

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

这将尝试容纳尽可能多的500px列，然后在各列之间平均分配剩余空间。

问题是，当仅剩一列（网格宽度<1000像素）时，该列将缩小直到达到500像素，并且即使网格变小，也不会缩小得更多，导致列溢出。

我已经尝试了许多组合，包括嵌套minmax函数，但无法解决此问题。

Answer 1

您可以使用max-width单位在元素上考虑vw。只需注意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>

Answer 2

我认为这会有所帮助

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