CSS 网格自动适应最大内容

Question

我有 4 列。第 1 列和第 4 列的实际内容为 150px，第 2 列为 250px，第 3 列为 370px。我想在浏览器宽度发生变化时换行。当我减小浏览器的宽度时，我希望每列在换行之前缩小到它们的最低宽度。所以我想第 4 列在低于 150px 宽度后会落到宽度为 100% 的下一行。

这是我认为应该完成的技巧:

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

有没有办法在不传递“最大内容”所在的固定宽度的情况下实现这一点？

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

https://jsfiddle.net/9hjb5qv8/

这是我在上面的 fiddle 中使用的 html/css:

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

Answer 1

我在玩网格时遇到了类似的问题:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))

如果我们看一下文档，我们可以看到 minmax命令有效: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

但是在 csswg 的重复文档中，它声明了一个简单的规则，不允许所有这些发生； https://drafts.csswg.org/css-grid/#funcdef-repeat

The generic form of the repeat() syntax is, approximately,

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

The first argument specifies the number of repetitions. The second argument is a track list, which is repeated that number of times.

However, there are some restrictions:

• The repeat() notation can’t be nested.

• Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

什么是固有尺寸或灵活尺寸？

• An intrinsic sizing function (min-content, max-content, auto, fit-content()).

因此该命令在网格中不起作用，因为每一列/行的大小都不同，并且无法进行换行。请参见下图。

这个行为应该使用 flex-box 来执行。