CSS Grid Gallery

Heading Level 3

The gallery is based on a 'Fallback-first' before switching to CSS grid at the first breakpoint. The images have been positioned into a line-based grid system, and each image covers more than just one cell.

The challenge is really to find images in a size that fit into the grid without losing their proportions, and it is important to let the images have some size to play with, so don't make them too tiny in the preparation. It needs a bit of practising. Start with a small grid and few images, then you can expand. This gallery covers 7 x 7 cells. The maximum is 12 x 12.

Internet Explorer does not 'understand' CSS Grid, so Flex-positioning has been used for the Fallback.

Placeholder Picture

Download this component