CSS网格自动适应最大内容

Question

我有4列.第1列和第4列的实际内容为150px,第2列为250px,第3列为370px.我希望在浏览器宽度更改时包装列.当我减小浏览器的宽度时,我希望每个列在包装之前缩小到它们的最小宽度.所以我想第4列会在宽度低于150px之后落到下一行,宽度为100%.

这就是我认为应该做的诀窍:

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

有没有办法实现这一点,而不通过固定宽度'max-content'？

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

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.c​​sswg.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 对于为什么最大内容、最小内容或其他固有大小不能与自动调整一起使用有一个很好的答案。他还建议使用 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 的替代品，所以我会尝试使用更新的网格技术来做所有事情。但事实证明，尽管你可以用 grid 做大部分事情，但它仍然无法取代 flexbox。事实上，Flexbox 是一维的，而网格是二维的。因此，他们应该以不同的方式做事。这就是为什么像这样的一些事情只能用 flexbox 而不能用 grid 来完成，还有很多事情只能用 grid 而不能用 flexbox 来完成。