html - 当网格项跨越多列时进入单列布局

Question

使用时:

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

在网格内部，一切似乎都完美无缺。它会创建适合空间的尽可能多的图 block 。

当我将 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

Does anybody have any insight as to why this happens?

因为当您在一个元素上设置 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>