当项目大小不同时，自动填充和minmax（）不起作用

Question

我正在尝试使用不同大小的项目制作完全响应的网格。

This example工作正常

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ; 

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
</div>

所有项目都是相同的大小，在最小的屏幕尺寸上，它们排列在一起。

现在，如果您对this example进行相同的尝试，那么离开显式网格并且必须再次移动的项目不会这样做，而是在指定的minmax值下缩小。因此，在最小的屏幕尺寸上，有些项目无法看到。

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

除了添加媒体查询之外，有没有办法让示例2表现得像示例1？

Answer 1

你写的内容有一个很大的答案：

现在，如果您对此示例尝试相同，那么离开显式网格并且必须再次移动的项目不会这样做，而是在指定的minmax值下缩小。

“......已经离开明确网格的项目......”

这就是为什么你的网格项目在minmax的grid-template-columns最小集合之下缩小的原因。

一旦你不在显式网格中，你就在隐式网格中，并且grid-template-columns属性没有效果。

显式网格由three properties定义：

• grid-template-columns
• grid-template-rows
• grid-template-areas

隐式网格中的轨道忽略这些属性。相反，它们的大小使用grid-auto-rows和grid-auto-columns。

grid-auto-columns的默认值是auto，这就是当网格项退出显式网格时缩小到内容大小的原因。

试试这个：

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    grid-auto-columns: minmax(200px, 1fr); /* NEW */
}

然后，可选地，在重新调整大小时加入make the grid fill empty cells，也可以添加：

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    grid-auto-columns: minmax(200px, 1fr); /* NEW */
    grid-auto-flow: dense; /* NEW */
}

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-columns: minmax(200px, 1fr);  /* NEW */
  grid-auto-flow: dense;   /* NEW */
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

revised codepen

Answer 2

最简单的答案是否定的，你不能。原因是，当你组合auto-fill和minmax(200px, 1fr)时，你告诉浏览器渲染你的代码，使用最小值为200px且最大值为1fr的列制作网格。然后你告诉你的盒子跨越2或3列，这意味着它们在大屏幕上的最小宽度至少为400px或600px。在较小的屏幕上，跨度规则开始失去意义，但自动不接管。考虑到.a .b .c等各自的宽度差异，它仍然需要计算各列的宽度。

所以，遗憾的是，您需要使用媒体查询或查找其他类型的布局。