CSS网格自动适应max-content

Question

我有4栏。第1列和第4列的实际内容为150px，第2列为250px，第3列为370px。我想在浏览器宽度改变时换行。当我减小浏览器的宽度时，我希望每列在包装之前缩小到其最小宽度。因此，我认为第四列跌落到150像素以下时，它将以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执行。