Как заполнить пустое пространство в CSS Grid? ⇐ CSS

[Anonymous]

Я работаю над созданием адаптивного макета сетки с помощью CSS Grid, где у меня есть ряд элементов сетки, отображаемых в контейнере сетки. Я использую Grid-template-columns: повтор(3, minmax(100px, 1fr)); для автоматической регулировки количества столбцов в зависимости от доступного пространства. Кроме того, у меня есть определенный элемент сетки (третий), который охватывает несколько столбцов, используя Grid-column-start: span 2; и Grid-column-end: span 3;.
Однако в макете третий элемент сетки оставляет пустое пространство в сетке, где он находится. Я хочу заполнить это пустое пространство содержимым или дополнительными элементами сетки. Как я могу добиться этого с помощью CSS Grid?
Вот упрощенная версия моего HTML и CSS:

Код: Выделить всё

.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
grid-gap: 20px;
}

.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}

.grid-item:nth-child(3) {
grid-column-start: span 2;
grid-column-end: span 3;
}

Код: Выделить всё

1
2
3
4
5
6
7
8

Я попробовал настроить свойства CSS для макета сетки, например сетку- auto-columns, чтобы увидеть, будут ли они автоматически заполнять пустое пространство, созданное третьим элементом сетки. Однако эти свойства не дали желаемого результата.
Я ожидал найти решение внутри самого CSS Grid, которое динамически заполняло бы пустое пространство содержимым или дополнительными элементами сетки, обеспечивая визуально сбалансированная планировка. как это изображение:



Подробнее здесь: https://stackoverflow.com/questions/782 ... n-css-grid