Как предотвратить появление этих пробелов при изменении размера сетки изображения?

Question

Есть ли способ заставить другие изображения в сетке изображений автоматически перемещаться и заполнять эти пробелы, показанные на изображении, указанном ниже. Когда мой веб-браузер работает в полноэкранном режиме, проблем нет, но когда я начинаю изменять размер браузера, в сетке начинают появляться пробелы.

Заранее спасибо.

Это мой css

.grid{
  display:grid;
  gap:0.5rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  grid-auto-rows:300px;
}
.card{
  height:100%; 
  width:100%;
  border-radius:10px;
  background-size:cover;
  background-image:center;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}

Это HTML

<div class="grid">
    <div class="card card-wide" style="background-image: url(photos/1image.jpg)"></div>
    <div class="card" style="background-image: url(photos/2image.jpg)"></div>
    <div class="card" style="background-image: url(photos/3image.jpg)"></div>
    <div class="card card-wide" style="background-image: url(photos/5image.jpg)"></div>
    <div class="card" style="background-image: url(photos/6image.jpg)"></div>
    <div class="card-tall card" style="background-image: url(photos/7image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/9image.jpg)"></div>
    <div class="card" style="background-image: url(photos/10image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/11image.jpg)"></div>
    <div class="card card-wide" style="background-image: url(photos/12image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/13image.jpg)"></div>
    <div class="card" style="background-image: url(photos/14image.jpg)"></div>
    <div class="card" style="background-image: url(photos/15image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/16image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/17image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/18image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/19image.jpg)"></div>
    <div class="card" style="background-image: url(photos/20image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/21image.jpg)"></div>
    <div class="card card-tall" style="background-image: url(photos/22image.jpg)"></div>
    <div class="card " style="background-image: url(photos/23image.jpg)"></div>
    <div class="card" style="background-image: url(photos/24image.jpg)"></div>
    <div class="card" style="background-image: url(photos/4image.jpg)"></div>
    <div class="card card-wide" style="background-image: url(photos/8image.jpg)"></div>
</div>

https://i.stack.imgur.com/W3wTA.jpg

https://i.stack.imgur.com/3hPFi.jpg

Answer 1

попробуйте просто добавить 'grid-auto-flow: density;' CSS правило:

.grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  grid-auto-rows:300px;
  grid-auto-flow: dense; /* <--- THIS RULE ADDED */
}

см. Мой аналогичный пример например