让CSS Grid的最后一列具有自动调整的最小最小值minmax

Question

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

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

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

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

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

Answer 1

您可以使用max-width单位在元素上考虑vw

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