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 of stretch, however, all images are the same size, so they keep their original proportions.
- Responsive example
- Fluid example
Same sized images align nicely with each other.
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.
- Responsive example
- Fluid example
You can still use the width and height properties (or the width and height attributes of the img tag) to explicitly set dimensions for your images. This will prevent them from stretching out of proportion like some of the images in this example.
Smaller images stretch to fit when using the default alignment settings.
Align/justify start

These examples use alignment values of start.
- Responsive example
- Fluid example
Images align themselves to the alignment container's start edge.
Align/justify center

These examples use alignment values of center.
- Responsive example
- Fluid example
Images are centered within their alignment container.
Align/justify end

These examples use alignment values of end.
- Responsive example
- Fluid example
Images align themselves to the alignment container's end edge.
Span 5 columns
- Responsive example
- Fluid example
Span 3 columns, 2 rows
- Responsive example
- Fluid example
Span 3 columns, 3 rows
- Responsive example
- Fluid example