Question

说我有3个街区。每个块可以包含跨越网站整个宽度的内容，或更少。例如，假设块1具有填满整个宽度的内容。第2和第3块只有不到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时，包裹列的能力不再存在。

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

1 个答案: