Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a responsive Image Grid with HTML and CSS?
A responsive image grid displays images in a grid layout that adapts to different screen sizes. Using CSS flexbox, we can create a flexible grid system that automatically adjusts the number of columns based on the viewport width.
Syntax
/* Outer grid container */
.outer-grid {
display: flex;
flex-wrap: wrap;
}
/* Inner grid columns */
.inner-grid {
flex: percentage;
max-width: percentage;
}
/* Responsive breakpoints */
@media screen and (max-width: breakpoint) {
/* Responsive styles */
}
HTML Structure
First, we create the basic HTML structure with an outer grid container and inner grid columns −
<div class="outer-grid">
<div class="inner-grid">
<!-- images -->
</div>
<div class="inner-grid">
<!-- images -->
</div>
<div class="inner-grid">
<!-- images -->
</div>
<div class="inner-grid">
<!-- images -->
</div>
</div>
CSS Implementation
Outer Grid Container
The outer grid uses flexbox with wrapping enabled to allow columns to wrap to new rows −
.outer-grid {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
Inner Grid Columns
Each inner grid column takes 25% width by default, creating a 4-column layout −
.inner-grid {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.inner-grid img {
margin-top: 8px;
width: 100%;
padding: 10px;
display: block;
}
Media Queries for Responsiveness
For tablets (max-width: 800px), we switch to a 2-column layout −
@media screen and (max-width: 800px) {
.inner-grid {
flex: 50%;
max-width: 50%;
}
}
For mobile devices (max-width: 600px), we use a single-column layout −
@media screen and (max-width: 600px) {
.inner-grid {
flex: 100%;
max-width: 100%;
}
}
Complete Example
Here's a complete responsive image grid implementation −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.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;
display: block;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
@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>
</head>
<body>
<h1>Responsive Image Grid Example</h1>
<div class="outer-grid">
<div class="inner-grid">
<img src="https://picsum.photos/300/200?random=1" alt="Sample Image 1">
<img src="https://picsum.photos/300/250?random=2" alt="Sample Image 2">
<img src="https://picsum.photos/300/180?random=3" alt="Sample Image 3">
</div>
<div class="inner-grid">
<img src="https://picsum.photos/300/220?random=4" alt="Sample Image 4">
<img src="https://picsum.photos/300/200?random=5" alt="Sample Image 5">
<img src="https://picsum.photos/300/240?random=6" alt="Sample Image 6">
</div>
<div class="inner-grid">
<img src="https://picsum.photos/300/210?random=7" alt="Sample Image 7">
<img src="https://picsum.photos/300/190?random=8" alt="Sample Image 8">
<img src="https://picsum.photos/300/230?random=9" alt="Sample Image 9">
</div>
<div class="inner-grid">
<img src="https://picsum.photos/300/200?random=10" alt="Sample Image 10">
<img src="https://picsum.photos/300/260?random=11" alt="Sample Image 11">
<img src="https://picsum.photos/300/170?random=12" alt="Sample Image 12">
</div>
</div>
</body>
</html>
A responsive image grid with 4 columns on desktop, 2 columns on tablets, and 1 column on mobile devices. Each image has rounded corners and subtle shadows. The layout automatically adjusts when you resize the browser window.
Conclusion
Creating a responsive image grid with flexbox provides an elegant solution that adapts to different screen sizes. The combination of flex properties and media queries ensures optimal viewing on all devices.
5K+ Views
