我有4个专栏。第1和第4列的实际含量为150px，第2列为250px，第3列为370px。我想在浏览器宽度改变时换行这些列。当我减小浏览器的宽度时，我希望每列在换行之前收缩到它们的最低宽度。所以我想象第4列在其宽度低于150px之后会以100%的宽度落到下一行。

以下是我认为应该做到的：

repeat(auto-fit, minmax(max-content, 1fr))

有没有一种方法可以做到这一点，而不需要在“max-content”所在的位置传递固定的宽度？

下面是我使用媒体查询和硬宽度的解决方案

https://jsfidle.net/9hjb5qv8/

下面是我在上面的小提琴中使用的HTML/CSS：

null

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

@media (max-width: 799px) {
  .container {
      grid-template-columns: minmax(max-content, 1fr);
  }
}

@media (min-width: 800px) {
  .container .p2,
  .container .p3 {
    grid-column: auto / span 2;
  }
}

.container > div {
  background-color: gray;
  text-align: center;
}

<div class="container">
  <div class="p1">
    <img src="https://via.placeholder.com/150x150">
  </div>
  <div class="p2">
    <img src="https://via.placeholder.com/250x150">
  </div>
  <div class="p3">
    <img src="https://via.placeholder.com/370x150">
  </div>
  <div class="p4">
    <img src="https://via.placeholder.com/150x150">
  </div>
</div>

null