- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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?
Following is the code to create a responsive image grid using HTML and CSS −
Example
<!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>
Output
The above code will produce the following output −
On resizing the screen the grid will resize from 3 columns to 2 columns and so on −
- Related Articles
- How to create a responsive image with CSS?
- How to create a responsive portfolio gallery grid with CSS?
- How to create a responsive image gallery with CSS
- Building a Responsive Grid-View with CSS
- How to create a responsive slideshow with CSS and JavaScript?
- How to create a responsive header with CSS?
- How to create a responsive form with CSS?
- How to create a responsive table with CSS?
- How to create a responsive "timeline" with CSS?
- How to create responsive typography with CSS?
- How to create responsive testimonials with CSS?
- How to create a responsive navigation menu with a login form inside of it with HTML and CSS?
- How to create a responsive slideshow gallery with CSS and JavaScript?
- How to create a responsive login form with CSS?
- How to create a responsive checkout form with CSS?

Advertisements