CSS Grid 自动适应最大内容

Question

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

这就是我认为应该做的伎俩：

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

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

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

https://jsfiddle.net/9hjb5qv8/

这是我在上面的小提琴中使用的 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

repeat() 语法的一般形式大约是，

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

第一个参数指定重复次数。第二 参数是一个曲目列表，它会重复该次数。

但是，有一些限制：

• repeat() 表示法不能嵌套。

• 自动重复（自动填充或自动调整）不能与 固有或灵活尺寸。

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

• 内在的大小调整函数（min-content、max-content、auto、fit-content()）。

因此该命令在网格中不起作用，因为每列/行的大小不同，并且无法进行换行。以下面的图片为例。

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

Answer 2

@kivylius 对为什么 max-content、min-content 或其他固有大小不适用于自动调整有一个很好的答案。他还建议使用 flexbox 来实现您的目标。所以，我只是在扩展他的回答，离开了 flexbox 的方式。

.flex-auto-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.flex-auto-wrap > * {
    flex: 1; /* this is to make elements/columns in each row have equal width and fill up all available space in the row, similar to auto-fit in grid */
    /* flex-grow: 1; this can be used to make elements/columns in each row maintain their individual width but stretch to fill up all available space in the row */
}

div {
    color: #ddd;
    background-color: #222;
    padding: 5px;
    text-align: center;
}

<section class="flex-auto-wrap">
    <div>1</div>
    <div>11</div>
    <div>111</div>
    <div>1111</div>
    <div>11111</div>
</section>

PS：我曾经认为网格是 flexbox 的替代品，所以我会尝试使用更新的网格技术来做所有事情。但事实证明，即使你可以用网格做大部分事情，它仍然不能取代 flexbox。事实上，flexbox 是一维的，而网格是二维的。所以，他们注定要以不同的方式做事。这就是为什么有些像这样的事情只能用 flexbox 而不是 grid 来完成，还有很多事情只能用 grid 而不是 flexbox。