Back To Tutorials

CSS Grid Image Gallery

Intermediatechallenge

Build a responsive image gallery using CSS Grid.

Objective

Create a responsive image gallery that uses CSS Grid for layout and adjusts based on screen size.

Requirements

  1. Display at least 12 images in a grid layout.
  2. The gallery should be responsive: 4 columns on desktop, 3 on tablet, and 2 on mobile.
  3. Implement a lightbox effect when an image is clicked.
  4. Add hover effects to the images.

Steps

  1. Set up the HTML structure for the image gallery.
  2. Use CSS Grid to create the gallery layout.
  3. Implement media queries for responsiveness.
  4. Add hover effects to the images using CSS.
  5. Create a lightbox effect using CSS and JavaScript.

Bonus

  • Add category filtering to the gallery.
  • Implement lazy loading for the images.

Resources

Solution

Here's a step-by-step solution to create a responsive image gallery using CSS Grid:

  1. HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Image Gallery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <img src="https://via.placeholder.com/300x200?text=Image+1" alt="Image 1">
        <img src="https://via.placeholder.com/300x200?text=Image+2" alt="Image 2">
        <!-- Repeat for 10 more images -->
    </div>

    <div id="lightbox" class="lightbox">
        <span class="close">&times;</span>
        <img class="lightbox-content" id="lightbox-image">
    </div>

    <script src="script.js"></script>
</body>
</html>
  1. CSS Styling (styles.css):
body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 1024px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-content {
    display: block;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 15px;
    right: 35px;
    cursor: pointer;
}
  1. JavaScript for lightbox functionality (script.js):
document.addEventListener('DOMContentLoaded', function() {
    const gallery = document.querySelector('.gallery');
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-image');
    const close = document.querySelector('.close');

    gallery.addEventListener('click', function(e) {
        if (e.target.tagName === 'IMG') {
            lightbox.style.display = 'block';
            lightboxImg.src = e.target.src;
        }
    });

    close.addEventListener('click', function() {
        lightbox.style.display = 'none';
    });

    lightbox.addEventListener('click', function(e) {
        if (e.target === lightbox) {
            lightbox.style.display = 'none';
        }
    });
});

This solution creates a responsive image gallery using CSS Grid. The gallery displays in 4 columns on desktop, 3 on tablet, and 2 on mobile. Images have a hover effect that slightly scales them up. Clicking an image opens a lightbox view.

To add the bonus features:

  1. For category filtering, you would add data attributes to the images in HTML, create filter buttons, and use JavaScript to show/hide images based on the selected category.

  2. For lazy loading, you could use the Intersection Observer API or a library like lozad.js to load images as they come into view.