Grid layout, fit to column width

All thumbnails fit column width while keeping their original ratio (= images are not cropped and not distorted)

Example with 10 columns per row on desktop/large screen. The number of columns changes dependent on viewport width.

Example with 3 columns per row on desktop/large screen. The number of columns changes dependent on viewport width.

Grid layout, fixed cell ratio

Thumbnails are resized to fit inside a specific cell ratio without being cropped
The following example has a cell ratio of 1:1

This example has a cell ratio of 16:9

Thumbnails are resized and cropped to fill a specific cell ratio
The following example has a cell ratio of 1:1

This example has a cell ratio of 9:16

Thumbnails are distorted to fit a specific cell ratio
The following example has a cell ratio of 1:1

Different spacing and alignment

With large spacing and top aligned thumbnails

With medium spacing and bottom right aligned thumbnails

With small spacing and top left aligned thumbnails (resized and cropped to fill)

With small spacing and middle center aligned thumbnails (resized and cropped to fill)

Thumbnails with borders

Border around image

Border around cell (fit column width and row height)

Border around cell with image that has been fit to cell

Border around cell with image that fills cell

Image captions

Examples with thumbnails that fit column width

Examples with thumbnails that fit cell ratio

Mouse over effects

Zoom in

Zoom out

Zoom in (inside image canvas)

Zoom out (inside image canvas)

Rotate

Rotate 360°