html - 具有 CSS 网格和自动适应 minmax 的完全响应元素

标签 html css media-queries css-grid

使用 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%?

类似于:用尽可能多的 400 像素的元素填充容器,但要确保它们的宽度都不超过容器宽度的 100%。

CodePen Demo

最佳答案

您应该将 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>

关于html - 具有 CSS 网格和自动适应 minmax 的完全响应元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47981690/

相关文章:

html - 使用VBA从网站中抓取innerHTML

css - 在没有 JS 的情况下滚动页面时应用媒体查询

css - 没有 javascript 的响应式网页设计,适用于 IE <=8。是否可以?

html - 媒体查询有问题

javascript - 下拉框不通过 php 发送表单数据

html - 用于列表导航的 Sprite 背景跨度

html - 占位符样式在 chrome 中不起作用?

ios - 如何在 iOS 设备上滚动时保持动画 gif 动画?

css - 在 twitter bootstrap 中使用不同的字体

css - compass Sprite