CSS 使用跨度属性时网格自动调整大小不起作用

Question

假设我有 3 个街区。每个块都可以包含跨越网站整个宽度或更小的内容。例如，假设块 1 的内容填满了整个宽度。第二和第三块只有不到 1/3 的内容。我将如何设置一个网格：1) 尊重第一个块中的内容量，然后允许第二个和第三个块并排？

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

观察列在需要时如何换行。现在我运行感兴趣的是，如果我在任何列上放置一个 span 2，它看起来就像我想要的那样。虽然当我调整它的大小时，它可以在除一列之外的任意数量的列上工作。当我将其调整为 1 列时，会发生一些奇怪的事情。看这里：codepen.io/anoblet/pen/GyyEOv

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

<div id="container">
  <div style="grid-column: span 2">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 1

我已通过将 grid-column-end 设置为 -1 来解决此问题。尝试使用 grid-column: 1 / span 2 时，换行功能不再存在。

CSS grid auto-sizing not working when using span properties