Okay here we go again. Today's attempt: responsive grid with resizing images, BUT ALSO keeping them squares without having to crop the original images.

So as vaguely covered in the captions, currently this is set up to be a gallery of four images to a row that will resize up to a maximum size of either 400px or their full size (whichever is smaller); this means tiny images like the top right one may throw the whole thing off if they're smaller than 400px (that one is), but it seems unlikely that you'll be using anything that small. I have both the gallery thumbnails and the full sized images using the same images for this example, but they're two different things in the HTML (full size is a link, thumbnail is an embedded image) so if you wanted to go through the effort of making special thumbnails, you could (and in theory that would cut down on loading times for the full gallery, as it'd load the full-sized images one by one).

At certain window size breakpoints, the number of images per row will lower; I can also increase the number above the current breakpoint (so eg there'd be four or five per row if your browser is extra wide) but I wasn't able to figure out how to get the thumbnails to keep their aspect ratio and reactively scale; if someone more familiar with CSS and its various interactions can figure that puzzle out, absolutely go for it lmao

I have done VERY little prettying-up of anything here minus what I personally needed to not sear my eyeballs; the visuals can largely be customized any way we'd like, I just didn't want to put that effort in until we knew the practical side was working and was what was wanted, haha.

To recreate, save this page, cwa_lightbox_v1.js, and layout_ar.css to the same folder; images and thumbnails should be free to be anywhere in your file tree as long as you navigate to them properly.