为什么 CSS 网格中的空列没有折叠？

Question

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

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

post 表示

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.

它表示空列将被折叠，剩余的元素将平分额外的 space。

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

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

这是输出：

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

还有为什么最后两张图片没有拍到应该拍的剩余space？

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?

因为有柱子挡路

一旦网格项目开始换行，您可以推断出三件事：

第一行中的所有 space 已被消耗。
已创建网格中的所有列轨道。
没有额外的 space 可供 auto-fit 使用。

所有这些都可以在您在问题中发布的图片中看到。

以下是 auto-fit 在有更多 space 可用时的工作方式。

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

更多详情：

为什么 CSS 网格中的空列没有折叠？

Why are empty columns not collapsing in CSS Grid?

html

css

grid-layout

css-grid