How to Create an Image Grid Gallery with HTML & CSS

August 3rd, 2021

In this tutorial we'll be using CSS3 Grid to build an Image/Photo Grid Gallery, which you can easily add to your existing websites or apps. This is a responsive, mobile friendly solution that doesn't require too many lines of CSS.

Video Tutorial

Source Code

You can find the source code for this video below. Alternatively, browse it on CodePen.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image Grid Gallery with HTML & CSS</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="image-grid">
		<img class="image-grid-col-2 image-grid-row-2" src="http://dcode.local/tmp/architecture.jpg" alt="architecture">
		<img src="http://dcode.local/tmp/architecture.jpg" alt="architecture">
		<img src="http://dcode.local/tmp/architecture.jpg" alt="architecture">
		<img src="http://dcode.local/tmp/architecture.jpg" alt="architecture">
		<img src="http://dcode.local/tmp/architecture.jpg" alt="architecture">
	</div>
</body>
</html>

main.css

body {
	margin: 0;
}

.image-grid {
	--gap: 16px;
	--num-cols: 4;
	--row-height: 300px;

	box-sizing: border-box;
	padding: var(--gap);

	display: grid;
	grid-template-columns: repeat(var(--num-cols), 1fr);
	grid-auto-rows: var(--row-height);
	gap: var(--gap);
}

.image-grid>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-grid-col-2 {
	grid-column: span 2;
}

.image-grid-row-2 {
	grid-row: span 2;
}

/* Anything udner 1024px */
@media screen and (max-width: 1024px) {
	.image-grid {
		--num-cols: 2;
		--row-height: 200px;
	}
}

If you have any questions about this code, please leave a comment on the video.