Inline Expansion Thumbnail Grid Block for React

Under the chosen row. The band is a full-width grid item placed on the row below the thumbnail; the later thumbnails flow into the rows after it. When nothing is open the same band rests after the last row as an empty tray, so the block is always the same height: opening a picture moves the rows below it down by exactly the tray's height.

The band is in the DOM straight after the thumbnail that opened it, so Tab goes into it next. Previous and Next keep focus on the button you pressed, even though the band is rebuilt in a new place when the next picture is in another row. Close and Escape return focus to the thumbnail.

Tab visits every thumbnail, Enter or Space opens or closes one, Escape closes the band while focus is inside the block, and Previous and Next wrap round at the ends.

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change. The preview shows the picture whole at its own ratio and the grid crops it square, so keep each entry's ratio the photograph's own.

A dialog hides the grid. Here the picture opens in context, next to the pictures you are choosing between, and nothing is trapped: the rest of the page stays reachable. For a full-screen viewer, see the lightbox.

Four thumbnails across; the band opens under the tapped row with the picture on top, then the title and source, then Previous, Next and the position. The tray keeps one height, so opening never scrolls the page.