CSS Grid Photo Gallery Examples
These examples use various alignment settings and track spanning to display images in a different way.
-
Using same-sized images
These examples use the default
align-items
value ofstretch
, however, all images are the same size, so they keep their original proportions. -
Default alignment (stretch)
These examples also use the default alignment of
stretch
but, because not all images are the same size, it results in some images being stretched.Smaller images stretch to fit when using the default alignment settings. -
Images align themselves to the alignment container's start edge. -
Align/justify center
These examples use alignment values of
center
.Images are centered within their alignment container. -
Images align themselves to the alignment container's end edge. -
Span 5 columns
-
Span 3 columns, 2 rows
-
Span 3 columns, 3 rows