How to create a responsive grid image?
Image grid represents a layout with multiple images within each row and column. But the grid images in the large size devices may not remain the same as in small devices. So here we will learn to create a responsive grid with CSS.
Creating a responsive grid
To create a grid image, add a div for the row that will contain multiple images. Inside each column add multiple <image> element. Use the flex property to the grid images. Use media Query rule for responsive grid image. The CSS property will be added to @media with some max-width or min-width of the screen.
Example: Creating responsive grid images with CSS
In this example, we have created a 3-column grid image which changes to a 2-column grid for screen size lower than 800px and a 1-column grid for screen size lower than 500px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.row {
display: flex;
flex-wrap: wrap;
padding: 0 3px;
}
/* Create 3 columns in each row */
.column {
flex: 30%;
max-width: 30%;
padding: 0 3px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/*The layout will have two columns*/
@media screen and (max-width: 800px) {
.column {
flex: 40%;
max-width: 40%;
}
}
/* The image stack one after another */
@media screen and (max-width: 500px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557656-101156.jpeg" alt="img">
</div>
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557656-101156.jpeg" alt="img">
</div>
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557656-101156.jpeg" alt="img">
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Creating responsive grid images
In the above example, we have used max-width rule. Now we will use min-width rule for creating responsive images.
Conclusion
In this tutorial, we have learned to create responsive grid images with CSS. Use grid layout and CSS flexbox property. And for responsive grid use media query rule.
