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 Demo

Answer 1

您应该将grid-template-columns更改为grid-template-columns: repeat(auto-fit, minmax(min-content, 400px))因为minmax以这种方式工作：它会尝试应用最大值，如果失败则应用最小值。但在此，您可以在右侧的网格中获得空白。演示：

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 400px));
}

.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>

Answer 2

使用尽可能多的400px物品填充容器，但要确保它们的宽度不超过容器宽度的100％。

为此你可以使用＆＃34; max-content＆＃34;属性，在您的示例中，这将是：

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

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

2 个答案: