How to Create a Responsive Image Gallery with CSS Only
Image Gallery
How To, for Front End and Web Applications
By: Chrysanthus Date Published: 25 Apr 2025
This tutorial explains How to Create a Responsive Image Gallery with CSS Only. For this teaching project, there are four images in a horizontal row. All the images are of the same size. They are at their expected size.
The webpage is responsive, in the sense that, when its width is less than 500px, the four images are in one column. As the width of the webpage increases beyond 500px, all the images are in two columns (4 images in two rows). As the width increases beyond 700px, all the images are in four columns (four images in one row).
Explaining Responsiveness from Wide Screen down to Narrow Screen: When the webpage is at a wide screen, the four images are in one row, which means four columns. As the width of the screen is reducing, all the four images are becoming smaller and smaller. As soon as the width goes below 700px, the four images are in two columns, with larger sizes (but not as large as for the very wide screen). As the width of the screen decreases, the size of the images are decreasing, and still in two columns. As soon as the width goes below 500px, the four images are in one column, with larger sizes (almost as with the wide screen).
The complete code for this project is given at the end of this tutorial. Copy all the code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Reduce the width of the webpage continuously, until the one row becomes two columns. Continue to reduce it until the two columns become one column. The images are in the broad-network.com website. So the reader has to be hooked on to the Internet. The reader is advised to do this, before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Gallery</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any responsible modern webpage should have at least the first four tags in the HTML Head element above. The HTML style element will have all the essential CSS rules. The HTML JavaScript element will be left empty. Each image tag is in a div element, which is in another div element. All the divs are in the HTML body element.
The HTML body Element Content
The content of the body element is:
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_5terre.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<p class="desc">Add a description of image 1 here</p>
</div>
</div>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_forest.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<p class="desc">Add a description of image 2 here</p>
</div>
</div>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_lights.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<p class="desc">Add a description of image 3 here</p>
</div>
</div>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_mountains.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<p class="desc">Add a description of image 4 here</p>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
</div>
For the four images, there are four outer divs with class-name, "outer_div" . Each outer div corresponds to a particular image. Inside an outer div is an inner div. This inner div has an anchor element (hyperlink), that when clicked, will open a webpage for the image in a new browser tab (because of the attribute, "target='_blank' ").
Inside the anchor element is the image tag. When an image is clicked, a webpage for the image will open in a new window tab. The clicking event actually goes to the anchor element and not really to the image tag. The image tag is the content of the anchor element. Image gallery does not necessarily mean that the image must be in an anchor element; and when clicked, the anchor element should open a corresponding webpage in a new window (browser) tab. Those two consecutive features have just been included in this tutorial, for additional teaching purpose.
The width of each image is 600px and the height is 400px. These are the maximum dimensions; see below for explanation.
Still within the inner div is a paragraph element. This paragraph element has the description of the image. A paragraph element is a block-level element, and so, at the display (browser), it will appear below the image (which is an inline-element). The class-name for the four p elements for the different four images is "desc". With that, one CSS rule in the style-sheet will be applicable to all the four paragraphs.
Each of the four outer divs is not in any row container, as the reader might have expected. In the CSS style-sheet (HTML style element), each of these four outer divs will be floated left. This floating effect has to be stopped, as more divs are encountered. After the four outer divs in the code, there is one div with the class-name "clearfix", which stops the floating effect; see below for details. This div has no content.
After the div.clearfix in the code, is the div for the main document.
The HTML Style Element Content
Apart from the attribute, "style='padding:6px;' ", all the styles are in the CSS style-sheet (HTML style element).
At the top within the style element content, is the CSS rule:
* {
box-sizing: border-box;
}
This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the div element. The box-sizing property means that the width of each element is measured from the left edge of the left border, to the right edge of the opposite border, instead of from the left edge of the element's content, to the right edge of the element's content. The box-sizing property also means that the height of each element is measured from the top edge of the top border, to the bottom edge of the opposite border, instead of from the top edge of the element's content, to the bottom edge of the element's content. The box-sizing property makes coding convenient for projects like this one.
Styling the Four Outer divs
The CSS rule for the four outer divs is:
div.outer_div {
float: left;
width: 25%;
padding: 0 6px;
}
Remember that the outer divs are not in any row container. They are all floated left, to form a row at the wide screen. This floating effect has to be stopped, otherwise, there will be serious issues at the display (browser). Since there are four outer divs, each with its own inner div and image, the width of each outer div is 25% of the width of the HTML body element (100% divided by 4 equals 25%). The top and bottom padding of each outer div is 0px; and the right and left padding is 6px.
Stopping the Floating Effect of the Outer divs
In order to stop the floating effect, two features are needed: A somewhat fifth outer div (just after the fourth) whose class-name is "clearfix" for this project, and a corresponding pseudo element. The pseudo element is of a CSS rule (within the start and end tags of the HTML style element), which is:
div.clearfix::after {
content: "";
display: table;
clear: both;
}
Note how the selector has been expressed. The div.clearfix had no content in the HTML body element. "content: ''; " as CSS property in the pseudo element, also gives the div.clearfix, no content. "display: table;" as CSS property in the pseudo element, turns the HTML div.clearfix in the body element, into an empty table. A table by default, is a block-level element, meaning that it will be displayed on the next line, below the mimic row. "clear: both;" as CSS property in the pseudo element stops both left and right floating of div.clearfix .
Styling the Inner div
The four inner divs have the class-name, "item". The CSS rule for the four inner divs is:
div.item {
border: 1px solid #ccc;
}
Each inner div has a solid border of 1px and color, #ccc (light gray).
For size, the inner div fits into the outer div, whose width has been given above.
Inner div On-hover
The CSS rule for that is:
div.item:hover {
border: 8px solid #777;
}
When the mouse pointer goes over the inner div, its solid border becomes 8px thick with color, #777 (gray).
Styling Each Image
The CSS rule for each image tag is:
div.item img {
width: 100%;
height: auto;
}
The width is 100% that of its parent container, which is the inner div. "height: auto;" means the browser should choose an appropriate height for the image. These dimensions are necessary, because all the outer divs were floated (left).
Styling the Paragraphs
The CSS rule for that is:
p.desc {
text-align: center;
}
The text (description) is centered horizontally.
Responsiveness
The webpage is responsive, in the sense that, when its width is less than 500px, the four images are in one column. As the width of the webpage increases beyond 500px, all the images are in two columns (4 images in two rows). As the width increases beyond 700px, all the images are in four columns (four images in one row).
Explaining Responsiveness from Wide Screen down to Narrow Screen: When the webpage is at a wide screen, the four images are in one row, which means four columns. As the width of the screen is reducing, all the four images are becoming smaller and smaller. As soon as the width goes below 700px, the four images are in two columns, with larger sizes (but not as large as for the very wide screen). As the width of the screen decreases, the size of the images are decreasing, and still in two columns. As soon as the width goes below 500px, the four images are in one column, with larger sizes (almost as with the wide screen).
There are two media screen queries for this. They are:
@media only screen and (max-width: 700px) {
div.outer_div {
width: 50%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
div.outer_div {
width: 100%;
}
}
Each of the queries is applied to the outer divs. The first query has to be typed before the second query. For the first query, the width of the outer div is 50% (half of) of the body element, leading to two columns. For the second query, the width is 100% of the body element, leading to a single column. Read through the code again.
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Gallery</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
* {
box-sizing: border-box;
}
div.outer_div {
float: left;
width: 25%;
padding: 0 6px;
}
div.clearfix::after {
content: "";
display: table;
clear: both;
}
div.item {
border: 1px solid #ccc;
}
div.item:hover {
border: 8px solid #777;
}
div.item img {
width: 100%;
height: auto;
}
p.desc {
text-align: center;
}
@media only screen and (max-width: 700px) {
div.outer_div {
width: 50%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
div.outer_div {
width: 100%;
}
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_5terre.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<p class="desc">Add a description of image 1 here</p>
</div>
</div>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_forest.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<p class="desc">Add a description of image 2 here</p>
</div>
</div>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_lights.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<p class="desc">Add a description of image 3 here</p>
</div>
</div>
<div class="outer_div">
<div class="item">
<a target="_blank" href="#img_mountains.jpg">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<p class="desc">Add a description of image 4 here</p>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
</div>
</body>
</html>
Copy all the code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Reduce the width of the webpage continuously, until the one row becomes two columns. Continue to reduce it until the two columns become one column. The images are in the broad-network.com website. So the reader has to be hooked on to the Internet.
Chrys