Quick Gallery Codes

These are just a few quick pure html/css codes I put together super quickly to help make a responsive image gallery without JS. I can't say it's the best but it might be something to use / work off of if you're struggling with finding or creating a code yourself! To use it just include the style sheet / css and then the template for the html can be found under the given gallery type.

Credit is appreciated but unneeded.

Style Sheet

Right click the following and click 'save as' to keep it separate or open it & copy and paste it into your own style sheet!


Alternate Sheets
Versions that have some parts trimmed out to only include the code for the specificed type of gallery. (full) has the comments and spacing, and (.min)ified version of the CSS file will be smaller and compact.

Full Info Box [ full | min ]
Only Image [ full | min ]
Only Link [ full | min ]

Square Thumbnails
Replace flex-thumbs with square-thumbs in the first line for square icons.
To change the amount of square thumbnails in a row please go to the css and find the --per-row value to change.
This value is defined twice- once for mobile/smaller windows (default: 4) and once for desktop/larger screens (default: 6).

Extra notes.
• To change thumbnail size change the height for .gallery-wrapper.flex-thumbs > a (flex thumbnails) or adjust the number --per-row for .gallery-wrapper.square-thumbs > a (square thumbnails). Don't forget to alter the value in the @media as well, which is the desktop/larger screen version..
• Width of gallery is as big as its container. If you want it to be smaller then I recommend adding max-width: #; to the .gallery-wrapper class, with # being the desired width. If you change width or min-width that stops it from being responsive.
• I use '#x' as the link to close it because leaving it as '#' makes it jump to the top.

Gallery Codes & Examples

Gallery (full info box)
Gallery (only image)
Gallery (only link)

Gallery (full info box)

This version of the code includes a full box with title and description included when you click it. If you want to edit it and add more sections you can, I recommend putting it under the art-info div.

Square Thumbnails as an alternative.

Gallery (only image)

Only a larger version of the image pops up when you click it.

Gallery (only link)

If you wanna use this just for the thumbnail gallery and have each page link to its own page then this would be what you want. It'll look just like the previous examples.