当网格项跨越多列时，进入单列布局。

Question

使用时：

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

在网格内部，一切看起来都很完美。它创造了尽可能多的瓷砖可以容纳在这个空间。

当我向网格项添加一个grid-column: span 2时，一切正常工作，直到只有足够的空间容纳一个项为止。

因为有了span 2，网格永远不会分解成一个列，并且创建一个具有以下项的难以置信的小列，并且从不包装。

如果我拿出span 2，它的包装就完美了。

如果可能的话，我不希望使用媒体查询来处理这种行为。

有人知道为什么会发生这种事吗？

下面是行为的代码：https://codepen.io/anoblet/pen/BYOeQM

​

.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;
}

<div class="grid grid-auto">
  <div>1</div>
  <div>2</div>
  <div class="span-2">3</div>
  <div>4</div>
  <div>5</div>
</div>
<div class="grid grid-900">
  <div>1</div>
  <div>2</div>
  <div class="span-2">3</div>
  <div>4</div>
  <div>5</div>
</div>

​

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

谢谢你的帮助:)

Answer 1

有人知道为什么会发生这种事吗？

因为当您对一个项设置grid-column: span 2时，它会强制该项跨越两列，而不管屏幕大小如何。在您的代码中，此项没有理由跨越一列。

当屏幕调整大小时，您需要告诉项目从两列切换到一列。为此目的存在媒体查询。

revised codepen

​

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

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

@media ( max-width: 500px ) {
  .grid   { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1;        }
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div class="span-2">3</div>
  <div>4</div>
  <div>5</div>
</div>

​