最大宽度为 100% 的 CSS 网格 minmax()答案

【问题标题】：CSS grid minmax() with max-width of 100%最大宽度为 100% 的 CSS 网格 minmax()
【发布时间】：2018-09-29 20:50:25
【问题描述】：

此代码使用带有minmax(30rem, 1fr) 的CSS 网格。

grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));

一切正常，但是当 ~~viewport~~ parent container 小于 30rem 时，会出现一个水平滚动条。我需要像minmax(min(30rem, 100%), 1fr)) 这样的东西。知道如何实现吗？

https://codepen.io/anon/pen/LmEyer

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}

li {
  background-color: #aaa;
  padding: 0.5rem;
}

<ul class="list">
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
<ul>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

当屏幕宽度为30rem 时，听起来您有一个断点。这需要媒体查询。

将此添加到您的代码中：

@media (max-width: 30rem) {
   ul { grid-template-columns: 1fr; }
}

revised codepen

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}

li {
  background-color: #aaa;
  padding: 0.5rem;
}

@media (max-width: 30rem) {
  ul {
    grid-template-columns: 1fr;
  }
}

<ul class="list">
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
<ul>

【讨论】：

1.媒体查询应考虑网格间隙。所以它应该是@media (max-width: calc(30rem + 2 * 10px))，但目前是not widely supported。
2.不幸的是，这仅在网格位于根级别时才有效。如果此网格位于比视口窄的容器中，则它不起作用。（是的，我最初的问题是关于视口的。但这是为了简单起见。）
无需考虑网格列间隙（仅在项之间呈现）。一旦屏幕达到30rem，就只有一列，没有间隙。 @mhchem
1. @Michael_B 是的，也不是。这不是网格差距，你是对的。但是 30rem 不是避免滚动条的正确值（在几个浏览器中测试了你的 codepen）。在这种情况下，您必须考虑 body 的边距。