A simple gallery with minimal html and css to demonstrate the use of responsive columns .cols {columns:200px 5; column-gap: 1.2vw; column-fill:balance;}.

The gap between the images varies as the screen is resized. The smaller the screen the smaller the gap.

The 200px is the minimum column width and the 5 is the maximum number of columns.

The scroll timeline is achieved using just #pics img styles and the @keyframes fadein animation.

The most complex styles are used for the popover display of the large image, and controls the fade in and scale of the large image and also the removal of the page scroll so that when the popover is closed you will be returned to the same position on the page.

All photos are from Pixabay.