首页 文章

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

提问于
浏览 次
7

使用 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 添加媒体查询来解决此问题，但这仅在您知道容器可以放置在任何位置时几乎不可能的情况下才有效 .

Is there a way or property to tell the items that they should never be wider than 100%?

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

CodePen Demo

html css css3 media-queries css-grid

2 回答

  • 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>
    回复于
  • 0

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

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

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

相关问题