为什么CSS Grid中空列不折叠？

Question

我从昨天开始学习CSS Grid，我有一个疑问。

我在阅读中了解到，如何在CSS Grid中使用 auto-fit 将元素均匀地放置在行中。这个 网站。

该帖子称

自动贴合 将当前可用的列扩展到空间中，使其占用所有可用空间。浏览器在用额外的列填充额外的空间后，才会这样做（就像用 auto-fill)，然后折叠空的。

它说空列会被折叠，剩余的元素会平均分享额外的空间。

然而，当我试图在我的代码中使用这个方法时，我没有发现空白列会折叠，剩余的有效元素会占用额外的空间。

.container {
  height: 100%;
  display: grid;
  grid-auto-rows: 150px;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.container > div {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
  color: white;
}

div > img {
  height: 100%;
  width: 100%;
}

body {
  margin: 10px;
}

<div class="container">
  <div><img src="./1.jpeg" alt="image" /></div>
  <div><img src="./2.jpeg" alt="image" /></div>
  <div><img src="./3.jpeg" alt="image" /></div>
  <div><img src="./4.jpeg" alt="image" /></div>
  <div><img src="./5.jpeg" alt="image" /></div>
  <div><img src="./6.jpeg" alt="image" /></div>
  <div><img src="./7.jpeg" alt="image" /></div>
  <div><img src="./8.jpeg" alt="image" /></div>
  <div><img src="./9.jpeg" alt="image" /></div>
  <div><img src="./10.jpeg" alt="image" /></div>
  <div><img src="./11.jpeg" alt="image" /></div>
  <div><img src="./12.jpeg" alt="image" /></div>
  <div><img src="./13.jpeg" alt="image" /></div>
  <div><img src="./14.jpeg" alt="image" /></div>
  <div><img src="./15.jpeg" alt="image" /></div>
  <div><img src="./16.jpeg" alt="image" /></div>
  <div><img src="./17.jpeg" alt="image" /></div>
  <div><img src="./18.jpeg" alt="image" /></div>
</div>

这里是OUTPUT。

当我检查输出时，我发现最后一行的空白列没有折叠。为什么会这样？

还有为什么最后两张图片没有占用应该占用的同等剩余空间？

Answer 1

当我检查输出时，发现最后一行的空白列没有折叠。为什么会这样？

因为第一行已经建立了网格的列。

另外，为什么最后两张图片没有占到它应该占到的同等剩余空间？

因为有列轨挡住了。

---

一旦网格项开始包裹，你可以推断出三件事。

1. 第一行的所有空间都被占用了。
2. 网格中所有的列轨都已经被创建。
3. 没有多余的空间可以用于 auto-fit 来工作。

这些都可以从你在问题中贴出的图片中看到。

下面是如何 auto-fit 当有更多的空间时，就可以使用。

.container {
  display: grid;
  grid-auto-rows: 150px;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.container > div {
  border: 1px dashed red;
}

div > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<div class="container">
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
</div>

更多详情。自动填充和自动填充的区别是什么？

---

如果你需要列在最后一行折叠，那么可以考虑使用flexbox而不是网格。

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  flex: 1 0 150px;
  height: 150px;
  border: 1px dashed red;
}

div > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<div class="container">
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
</div>

更多详情。在最后一行或特定的行上锁定flex项。