CSS subgrid items not flush with parent grid items

Background:

I am attempting to create a thumbnail view of an art portfolio, with thumbnails arranged in a 4×n grid. Some portfolio entries consist of a single image. Other portfolio entries consist of a series of images.

I would like to group serial images together for semantic purposes. But visually I would like to have serial images display adjacent to non-serial images in the grid.

The number of images per entry is not fixed.

I thought I could achieve this using CSS grid + applying subgrid to the serial entries. And while I can get them to participate in the parent grid horizontally (grid-colum: span 4), if there isn’t a mod-4 number of images in the subgrid (i.e. there are trailing items after spanning 4 columns), I get negative grid space ahead of the subsequent grid row. How do I close this gap?

HTML:

<div class="grid"> <div class="portfolio-piece portfolio-piece--nested-items"> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> <img src="https://placehold.co/259x148?text=Subgrid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> <div class="portfolio-piece"> <img src="https://placehold.co/259x148?text=Grid%20Item" /> </div> </div>

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

Reproduction:

Codepen