Lofi_PewPew's Collecion of Curiosities

you will need to save

1. this html file (add view-source: before the url, copy it to your code editor)
2. reset.css
3. gallery.css

to add a new filter group, copy the .button-group div and change the data-filter-group.

to add a new filter to an existing group, copy the .button button and change the data-filter to the class you will use to tag those elements. leave it blank to make a "show all" option.

i recommend using either 2 or 3 columns. if you want more, i would add another breakpoint for the --grid-item variable to avoid images getting too small.

this layout uses isotope for tag filtering, masonry (included in isotope) to position the grid elements into cascading columns, and biggerpicture for the lightbox.

this uses a lot of js! this will take a longer time to load for slower connections. i would strongly recommend optimizing your images if you plan on using this. a similar tag filtering system can be achieved without js via radio checkboxes and some :has(#id:checked) and display: none css lines, and you can get columns like this with css columns, but you need a js library like masonry to have the next item fill to the next highest position.

if your gallery has a lot of images, i'd also recommend using this template with a static site generator; there are many lines of html for each element and adding new items manually would be a pain, especially if you want to change something across all items down the road. in my setup, i add my new art entries to a json file and 11ty generates the list elements for me.