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

Question

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

我正在阅读如何使用 auto-fit 将元素均匀地放置在来自 this 的行中网站。

帖子是这样说的

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill) and then collapsing the empty ones.

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

但是，当我尝试在我的代码中使用它时，我没有发现空白列折叠并且剩余的有效元素占用额外空间。

.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>

这是输出:

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

另外，为什么最后两张图片没有占用应占用的相同剩余空间？

Answer 1

When I inspected the output I found that the last row's blank columns have not collapsed. Why?

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

Also why the last two images have not taken equal remaining space which it should take?

因为有柱轨挡在路上。

---

一旦网格项开始环绕，您可以推断出三件事:

1. 第一行的所有空间已被占用。
2. 已创建网格中的所有列轨道。
3. 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>

更多详情:What is the difference between auto-fill and auto-fit?

---

如果您需要在最后一行折叠列，请考虑使用 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>

更多详情:Targeting flex items on the last or specific row