css 网格列跨度不适用于自动调整或自动填充

Question

我使用 auto-fit 实现了网格环绕。现在我有一个 special div，它需要两列。现在，当网格被假设换行到一列时，偶数 div 消失了

现在您可以在此处看到当视口低于 670px 时粉红色框消失。

我该如何解决这个问题？

.grid {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.box,
.special-box {
  height: 200px;
}

.box:nth-child(even) {
  background-color: pink;

}

.box:nth-child(odd) {
  background-color: orange;

}

.special-box {
  background-color: purple;
  grid-column: span 2;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 <div class="special-box"></div>
</div>

Answer 1

您遇到的问题是由于 Grid Blowout。

SO 上的代码片段工具的视口尺寸对于框而言太小，粉红色网格元素被推到可视区域之外的右侧，因为它们位于奇数索引上。如果您运行全屏显示代码片段工具，然后使用 CNTRL + 鼠标滚轮放大和缩小，您可以看到它的实际效果。

Here 是一篇很好地解释主题的文章。

repeat(auto-fill, minmax(300px, 1fr))中的fr字段决定了发生这种情况时元素是否会填充行的其余部分，您可以通过将1fr更改为[=15=来避免此问题] 像这样：

.grid {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 0fr));
}

.box,
.special-box {
  height: 200px;
}

.box:nth-child(even) {
  background-color: pink;

}

.box:nth-child(odd) {
  background-color: orange;
}

.special-box {
  background-color: purple;
  grid-column: span 2;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 <div class="special-box"></div>
</div>

Answer 2

您需要添加一个媒体查询来删除 span 2 这会强制您的网格始终有 2 列，第二列为空

.grid {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.box,
.special-box {
  height: 200px;
}

.box:nth-child(even) {
  background-color: pink;

}

.box:nth-child(odd) {
  background-color: orange;

}

.special-box {
  background-color: purple;
}

@media (min-width:650px) {
  .special-box {
   grid-column: span 2;
  }
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 <div class="special-box"></div>
</div>

css 网格列跨度不适用于自动调整或自动填充

css grid-column span doesn't work well with auto-fit or auto-fill

css

css-grid