小编And*_*let的帖子

使用时：

grid-template-columns: repeat(auto-fit, minmax(*size*, 1fr));

在网格内部，一切似乎都完美无缺。它可以创建尽可能多的瓷砖以适应空间。

当我将 a 添加grid-column: span 2到网格项目时，一切正常，直到只有一个项目的足够空间。

由于span 2网格永远不会分解为一列，并且会创建一个非常小的列，其中包含以下项目并且永远不会换行。

如果我取出span 2，它会完美地包裹起来。

如果可能的话，我宁愿不使用媒体查询来解决这种行为。

有没有人知道为什么会发生这种情况？

这是行为的 Codepen：https ://codepen.io/anoblet/pen/BYOeQM

grid-template-columns: repeat(auto-fit, minmax(*size*, 1fr));

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}

.span-2 {
  grid-column: span 2;
}

.grid-auto {
  background: red;
}

.grid-900 {
  max-width: 850px;
  background: blue;
}

如果您调整窗口大小，两个网格都会显示该行为，但第二个网格会立即显示它。

谢谢您的帮助 ：）