CSS Image Gallery

Last Updated : 04 Jul, 2024

Creating a responsive image gallery is a great way to showcase a collection of pictures on your website. In this article, we'll walk you through the steps to build a responsive image gallery using HTML and CSS. This guide will help you create a beautiful gallery that looks great on all devices.

Step 1: Creating a Basic Gallery Structure

First, let's set up the basic structure of our gallery. Each gallery will contain a number of div sections. Each div section will contain an image and its description.

Here's an example of the HTML structure:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Image Gallery</title>
</head>

<body>
    <div class="gallery">
        <div class="box">
            <div class="image">
                <img src="your-image-url-here" alt="Image Description">
            </div>
            <div class="text">
                Image Description Here
            </div>
        </div>
        <!-- Add more boxes as needed -->
    </div>

</body>

</html>

Step 2: Styling the Gallery with CSS

Next, we need to style our gallery using CSS to make it look appealing and responsive.

Styling the Gallery Container

To style the gallery container, we will set the display property to flex. This means elements within the gallery container will have a flex context. We will also set the flex-flow property to row wrap, which sets the flex-direction and flex-wrap style.

CSS

.gallery {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

Styling the Box

Now, let's style each box in the gallery. We'll set the flex-basis to 20%, ensuring that each box takes up 20% of the container's width. We'll also add padding, margin, and a shadow effect for better look.

CSS

.box {
  flex-basis: 20%;
  width: 100%;
  padding: 10px;
  margin: 8px;
  box-shadow: 1px 1px 15px 1px green;
}

Step 3: Making the Gallery Responsive

To make the gallery responsive, we will use CSS media queries. This will ensure that the gallery looks great on devices with different screen sizes.

Example Media Query

Here's an example of a media query that adjusts the layout for screens with a maximum width of 300px:

CSS

@media only screen and (max-width: 300px) { 
  .box {
    flex-basis: 100%;
  }
}

Example Output

Here's what the final output might look like:

html

<!DOCTYPE html>
<html>

<head>
    <style>
        /* style to set body of page */
        body {
            width: 100%;
            margin: auto;
        }

        .gallery {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }

        .box {
            flex-basis: 20%;
            width: 100%;
            padding: 10px;
            margin: 8px;
            box-shadow: 1px 1px 1px 1px green;
        }

        .text {
            text-align: center;
            margin-top: 5px;
        }

        .image:hover {
            border: 3px solid green;
        }

        /* media query used here */
        @media only screen and (max-width: 300px) {
            .box {
                flex-basis: 100%;
            }
        }

        @media only screen and (max-width:500px) {
            .box {
                flex-basis: 40%;
            }
        }
    </style>
</head>

<body>
    <div class="gallery">
        <div class="box">
            <div class="image">
                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png" width="300"
                        height="300">
                </a>
            </div>

            <div class="text">
                Geeks Classes Image
            </div>
        </div>

        <div class="box">
            <div class="image">
                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png" width="300"
                        height="300">
                </a>
            </div>

            <div class="text">
                GeekforGeeks Image
            </div>
        </div>

        <div class="box">
            <div class="image">
                <a target="_blank" href="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png">
                    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png" width="300"
                        height="300">
                </a>
            </div>

            <div class="text">
                Geeks Image
            </div>
        </div>
    </div>
</body>

</html>

Output:

We've shown you how to create a responsive image gallery using HTML and CSS. By following these steps, you can build a gallery that looks great on any device. Don't forget to customize the gallery with your images and styles to make it unique.

ApoorvaSaxena2

Improve

Article Tags :