Почему пустые столбцы не сворачиваются в сетке CSS?

Question

Я начал изучать CSS Grid со вчерашнего дня, и у меня есть сомнения.

Я читал о том, как я могу использовать auto-fit для равномерного размещения элементов в строках из this веб-сайт.

В сообщении говорится, что

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>

Вот ВЫХОД:

Когда я проверил вывод, я обнаружил, что пустые столбцы последней строки не свернуты. Почему?

Также, почему последние два изображения не заняли равное оставшееся пространство, которое должно занять?

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>

Подробнее: Таргетинг на гибкие элементы в последней или указанной c строке