Grid image gallery

Back to list

This uses CSS grid to display a tiled image gallery. It automatically resizes your images, and they will wrap on mobile if you've designed your website with responsive widths.

Auto-fit tells the column widths to expand to fill the space, but if you want a uniform grid with the same number of columns in each row (even if a row is partially empty), use auto-fill. This article helps explain the distinction in more detail. You can also change the minimum width of an item.

Demo

Here is a demo. You can see how it behaves on different screen sizes by resizing your window.

Demo

Code

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 5px;
}

.galleryitem {
	padding:5px;
	max-width:95%;
}

.galleryitem img {
	max-width:100%;
}