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.
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.
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…
