Create a simple responsive image gallery with HTML and CSS

Tim Wells
5 min readApr 15, 2021

Let’s look at one method to create a great looking and deadly simple to build image gallery for a website using some simple HTML and CSS.

An example of the type of image gallery we will create

For this example we will create a full width image gallery that will fit in the images of different aspect ratios. It will also responsively resize to suit smaller devices making it mobile friendly.

The image gallery responsively resizes on smaller devices making it mobile friendly

Lets start with some basic HTML for the image gallery page.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery">
<meta name="author" content="Tim Wells">

<style type="text/css">
</style>
</head>
<body>
<div id="gallery">

<img src="images/image-001.jpg">
<img src="images/image-002.jpg">
<img src="images/image-003.jpg">
<img src="images/image-004.jpg">
<img src="images/image-005.jpg">
<img src="images/image-006.jpg">
<img src="images/image-007.jpg">
<img src="images/image-008.jpg">
<img src="images/image-009.jpg">
<img src="images/image-010.jpg">
<img src="images/image-011.jpg">
<img…

--

--

Tim Wells
Tim Wells

Written by Tim Wells

Self taught software developer and photographer.

Responses (2)