Simple HTML Image Gallery Using CSS Grid
CSS Grid makes it easy to create a modern, responsive image gallery without using JavaScript. Below is a step-by-step guide to building an image gallery that adjusts seamlessly to different screen sizes.
Step 1: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Image Gallery with CSS Grid</title>
<meta name="description" content="Learn how to create a responsive HTML image gallery using CSS Grid. No JavaScript needed! Step-by-step guide with code.">
<meta name="keywords" content="HTML image gallery, CSS grid gallery, responsive image grid, photo gallery HTML, CSS Grid layout">
</head>
<body>
<h1>Simple Image Gallery</h1>
<p>A responsive image gallery using HTML and CSS Grid.</p>
<!-- Image Gallery -->
<div class="gallery">
<img src="https://via.placeholder.com/300" alt="Image 1">
<img src="https://via.placeholder.com/300" alt="Image 2">
<img src="https://via.placeholder.com/300" alt="Image 3">
<img src="https://via.placeholder.com/300" alt="Image 4">
<img src="https://via.placeholder.com/300" alt="Image 5">
<img src="https://via.placeholder.com/300" alt="Image 6">
</div>
</body>
</html>
Step 2: CSS Code
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: #333;
}
/* Image Gallery Container */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
padding: 20px;
max-width: 1000px;
margin: auto;
}
/* Gallery Images */
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}
.gallery img:hover {
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 600px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
Explanation
-
CSS Grid for Layout
- The
.gallerycontainer usesgrid-template-columns: repeat(auto-fit, minmax(250px, 1fr));to create a responsive grid. - The
gap: 10px;adds spacing between images.
- The
-
Image Styling
object-fit: cover;ensures images maintain their aspect ratio.border-radius: 10px;gives rounded corners.transition: transform 0.3s;provides a smooth zoom effect on hover.
-
Responsive Design
- The grid adapts to different screen sizes using
auto-fit. - A media query adjusts column width for smaller screens.
- The grid adapts to different screen sizes using