How to Create a Responsive Image Grid that varies Between Four, Two or Full-width Images as the Screen Size Reduces using Flexbox and CSS Only
Image Grid
How To, for Front End and Web Applications
By: Chrysanthus Date Published: 3 May 2025
An image grid is a rectangle of images, consisting of one or more columns, where the images in one column or across columns do not necessarily have the same height. This tutorial explains How to Create a Responsive Image Grid that varies Between Four, Two or Full-width Images as the Screen Size Reduces, using Flexbox and CSS Only. A flexbox is a CSS layout module; it is needed in order to have an image grid (see below).
For the project of this tutorial, there are 26 images. When the screen width is greater than 900px, four columns of all the images are show at the browser. When the screen width is less than or equal to 900px, but greater than 600px, two columns of all the images are shown at the browser. When the screen width is less than or equal to 600px, only one column of all the images are shown at the browser. That is the responsive nature of the grid.
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. Click the three buttons and observed the change in each case. 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 Grid</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. All divs with images are in the HTML body element.
The HTML body Element Content
The content of the body element is:
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/wedding.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/rocks.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/falls2.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/paris.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/nature.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/mist.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/underwater.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/ocean.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/wedding.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/mountainskies.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/rocks.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/underwater.jpg" style="width:100%">
</div>
</div>
<!-- similar to the above -->
<div class="column">
</div>
<div class="column">
<!-- similar to the above -->
</div>
</div>
There is an outer div with class-name "row". This div.row has four inner divs. Each inner div has images (image tags). The four inner divs are for the four columns. The class-name for each of the inner divs is "column".
The width of each image is 100%. That is 100% relative to the inner div.
When the screen width is greater than 900px, all the four column divs (each with its images) are show at the browser. When the screen width is less than or equal to 900px, but greater than 600px, the first two column divs are shown at the browser, and the remaining two column divs are wrapped below the first two. When the screen width is less than or equal to 600px, the second, third and fourth column divs go below the first column, in that order; resulting in one long column.
The HTML Style Element Content
Apart from the attribute, "style='width:100%' ", for the image tags, 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 body Element
The CSS rule for the body element is:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
The gap for each of the four margins is 0. The font to be used by the body element and all its content, is Arial. If the browser does not have Arial, then it should use Helvetica. If the browser does not have Helvetica, then its should use a good sans-serif font, that it should have.
Styling the div with Buttons
The CSS rule for the div that has the buttons is:
div.header {
padding: 32px;
text-align: center;
}
The content of the header div in the body element consists of an H1 Element, that extends from the left end of the div to the right end of the div; and a paragraph element that extends from the left end of the div to the right end of the div.
The padding all round (four sides) these two elements together, is 32px . "text-align: center;" means the text in the H1 element and in the paragraph element, are center aligned.
Styling the row div
There is only one row div. The CSS rule for the row div is:
div.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
"display: flex;" means that the div.row is a flex-box. This implies that the inner divs (each of which has the images) can all be in a row or all be in a column. For this project, they will all be in one row (four flex items in one row), since row is the default (not column). "flex-wrap: wrap;" means that if the screen width is small, some inner divs on the right, will wrap to the next line with their images. "padding: 0 4px;" means that the the top and bottom padding of the row div is 0px, and the right and left padding of the row div, is 4px.
Styling the Inner column divs
The inner divs are the flex items. In the body element, each inner div has the class-name, "column". Do not forget that each inner div has a set of images. When there is wrapping of flex items, any inner div going to the next line below, will go with its images. The CSS rule for each flex item is:
div.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
"flex: 25%;" means that each inner div (flex item) will have 25% of the width of the parent div.row. Given that there are four inner divs (flex items), then the display will have four columns (four inner divs in one row). This is for the wide screen. For the two smaller screens, media screen queries are needed (see below).
"padding: 0 4px;" means that the top and bottom padding of each inner div is 0px, and the right and left padding of each inner div, is 4px.
Styling the Image Tags
The CSS rule for each image tag is:
div.column img {
margin-top: 8px;
}
It is the image tag that is styled here, and not the image. The margin-top of each image tag is 8px. This increases the gap between the image itself and the top of its tag; and hence increasing the gap between two images in a column (inner div).
It must be emphasized here, that each image is quite broad in width, and so there is no need to specify the widths (sizes) the images should have, in a column. Once they are in a div, since two of them cannot lie side-by-side (left-right), then they are forced to be in one column (one below the other). The image tag is an inline element.
Responsiveness
The webpage is responsive, in the sense that, when its width is less than or equal to 600px, the four columns form one column. As the width of the webpage increases beyond 600px, all the columns form two columns (4 columns in two rows). As the width increases beyond 900px, all the four columns are as four columns (four columns in one row).
Explaining Responsiveness from Wide Screen down to Narrow Screen: When the webpage is at a wide screen, the four columns are in one row. Do not forget that each column consists of images. As the width of the screen is reducing, all the column images are becoming smaller and smaller. As soon as the width goes below 900px, the four columns are in two columns, with larger size images (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 600px, the four columns are in one long column, with larger image sizes (almost as with the wide screen).
There are two media screen queries for this. They are:
@media screen and (max-width: 900px) {
div.column {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
div.column {
flex: 100%;
max-width: 100%;
}
}
Each of the queries is applied to a column div (flex item). The first query has to be typed before the second query. For the first query, the width of the column div is 50% (half of) of the row div width, leading to two columns. For the second query, the width is 100% of the row div width, leading to a single long column. Both the flex and max-width properties have to be in each query. 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 Grid</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;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
div.header {
padding: 32px;
text-align: center;
}
div.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
div.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
div.column img {
margin-top: 8px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
div.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
div.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/wedding.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/rocks.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/falls2.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/paris.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/nature.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/mist.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/underwater.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/ocean.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/wedding.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/mountainskies.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/rocks.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/underwater.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/wedding.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/rocks.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/falls2.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/paris.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/nature.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/mist.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/underwater.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/ocean.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/wedding.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/mountainskies.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/rocks.jpg" style="width:100%">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/underwater.jpg" style="width:100%">
</div>
</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. Click the three buttons and observed the change in each case. The images are in the broad-network.com website. So the reader has to be hooked on to the Internet.
Chrys