Элементы подсетки CSS не совпадают с элементами родительской сетки ⇐ Html

[Anonymous]

Справочная информация:
Я пытаюсь создать миниатюры портфолио произведений искусства, в которых миниатюры расположены в сетке 4×n. Некоторые записи портфолио состоят из одного изображения. Другие записи портфолио состоят из серии изображений.
Я хотел бы сгруппировать серийные изображения вместе для семантических целей. Но визуально мне хотелось бы, чтобы серийные изображения отображались рядом с непоследовательными изображениями в сетке.
Количество изображений на запись не фиксировано.
Я думал, что смогу добиться этого, используя сетку CSS + применив подсетку к серийным записям. И хотя я могу заставить их участвовать в родительской сетке по горизонтали (

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

grid-colum: span 4

), если в подсетке нет изображений по модулю 4 (т. е. после охвата 4 столбцов есть конечные элементы), я получаю отрицательное пространство сетки перед последующей строкой сетки. Как мне устранить этот пробел?
HTML:

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

[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]
[img]https://placehold.co/259x148?text=Subgrid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

[img]https://placehold.co/259x148?text=Grid%20Item[/img]

CSS:

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

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1.5rem;
max-width: 69rem;
}

.grid .portfolio-piece {
display: grid;
}

.grid .portfolio-piece.portfolio-piece--nested-items {
grid-template-columns: subgrid;
gap: 1.5rem;
grid-column: span 4;
}

Воспроизведение:
Codepen

Подробнее здесь: https://stackoverflow.com/questions/798 ... grid-items