CSS-Unterrasterelemente stimmen nicht mit den übergeordneten Rasterelementen überein ⇐ HTML

[Anonymous]

Hintergrund:
Ich versuche, eine Miniaturansicht eines Kunstportfolios zu erstellen, wobei die Miniaturansichten in einem 4×n-Raster angeordnet sind. Einige Portfolioeinträge bestehen aus einem einzelnen Bild. Andere Portfolioeinträge bestehen aus einer Reihe von Bildern.
Ich möchte serielle Bilder aus semantischen Gründen gruppieren. Optisch möchte ich jedoch, dass serielle Bilder neben nicht-seriellen Bildern im Raster angezeigt werden.
Die Anzahl der Bilder pro Eintrag ist nicht festgelegt.
Ich dachte, ich könnte dies erreichen, indem ich CSS-Raster + das Unterraster auf die seriellen Einträge anwende. Und während ich sie dazu bringen kann, horizontal am übergeordneten Raster teilzunehmen (

Code: Select all

grid-colum: span 4

), wenn das Unterraster keine Mod-4-Anzahl an Bildern enthält (d. h. nachgestellte Elemente nach der Überschreitung von 4 Spalten), erhalte ich einen negativen Rasterabstand vor der nachfolgenden Rasterzeile. Wie schließe ich diese Lücke?
HTML:

Code: Select all

[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:

Code: Select all

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

Reproduktion:
Codepen