具有CSS网格和自动调整minmax的完全响应项目

Question

使用grid-template-columns: repeat(auto-fit, minmax(600px, 1fr))可以轻松构建响应式CSS网格.容器将填充尽可能多的元素,而不使用媒体查询.

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

.item {
  height: 100px;
  background: #ccc;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

问题是当屏幕小于指定的最小值时,项目比屏幕宽minmax().您可以通过添加媒体查询来解决此问题400px,但这仅在您知道容器周围没有内容时才有效.当容器可以放在任何地方时,这几乎是不可能的.

有没有办法或财产告诉这些项目他们永远不应该超过100%？

类似的东西:用尽可能多的400px物品填充容器,但要确保它们的宽度不超过容器宽度的100%.

CodePen演示

Answer 1

用尽可能多的 400px 项目填充容器，但确保它们的宽度不超过容器宽度的 100%。

为此，您可以使用“max-content”属性，在您的示例中，这将是：

.unresponsive {
    grid-template-columns: repeat(auto-fit, minmax(400px, auto));
    grid-auto-columns: max-content;
}