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 src="images/image-012.jpg">
<img src="images/image-013.jpg">
<img src="images/image-014.jpg">
<img src="images/image-015.jpg">
<img src="images/image-016.jpg">
<img src="images/image-017.jpg">
<img src="images/image-018.jpg">
<img src="images/image-019.jpg">
<img src="images/image-020.jpg">
<img src="images/image-021.jpg">
<img src="images/image-022.jpg">
<img src="images/image-023.jpg">
<img src="images/image-024.jpg">

</div>

</body>
</html>

As you can see, we have a basic HTML structure with a div we have creatively given the id of gallery. Inside that are 24 images I used for this tutorial example. (Those images were downloaded from unsplash for the purpose of this tutorial).

All that’s left now is to add some styling to get it looking right.

In the HTML above I’ve included style tags to keep this simple, but in your case I would suggest putting the CSS into it’s own file…

--

--

Tim Wells

Self taught software developer and photographer.