Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive Image Grid with HTML and CSS?
The image grid on a web page displays images in a grid. In an outer grid, we can create inner grids. Also, the responsiveness needs to be set for the image grid for different devices. On a web browser, check the responsiveness by resizing the web browser. Let us see how to create a responsive image grid with HTML and CSS.
Set the outer and inner grid
A div for the outer grid is set. Within that, the inner grids are set. We have set three inner grids inside our outer grid −
<div class="outer-grid">
<div class="inner-grid">
<!?images -->
</div>
<div class="inner-grid">
<!?images -->
</div>
<div class="inner-grid">
<!?images -->
</div>
</div>
Position the outer grid
The outer grid is set as a flex using the display property. The flex-wrap property is set with the value wrap to specify that the flex items will wrap if necessary −
.outer-grid {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
Position the inner grid
The flex is set for the inner grids. The flex-basis is set as 25%, therefore flex: 25%. It sets the initial main size of a flex item. The max-width property is used to set maximum width −
.inner-grid {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
Images in the Inner Grid
The width for the image in the inner grid is set to 100% −
.inner-grid img {
margin-top: 8px;
width: 100%;
padding: 10px;
}
Set the responsiveness
When the web browser is set to less than 800px, the responsiveness works. The flex property is set to 50% −
@media screen and (max-width: 800px) {
.inner-grid {
flex: 50%;
max-width: 50%;
}
}
When the web browser size is less than 600px, the flex and the maximum width is set to 100% −
@media screen and (max-width: 600px) {
.inner-grid {
flex: 100%;
max-width: 100%;
}
}
Example
The following is the code to create a responsive image grid using HTML and CSS −
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.outer-grid {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.inner-grid {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.inner-grid img {
margin-top: 8px;
width: 100%;
padding: 10px;
}
@media screen and (max-width: 800px) {
.inner-grid {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.inner-grid {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<h1>Responsive Image Grid Example</h1>
<div class="outer-grid">
<div class="inner-grid">
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
</div>
</body>
</html>
5K+ Views
