Responsive Gallery with HTML and CSS

You may have come to a time where you wanted to create a Gallery images. In this article you will learn about creating Responsive Gallery with HTML and CSS. It is a kind of div where the images are stacked nicely together.

Preview (Responsive Gallery with HTML and CSS)

HTML

<h1 class="title">Responsive Gallery</h1>
    <div class="container">
        <div class="photo-column">
            <!-- Random Images from Unsplash -->
            <img src="https://source.unsplash.com/random?nature&1" class="image" />
            <img src="https://source.unsplash.com/random?nature=2" class="image" />
            <img src="https://source.unsplash.com/random?nature=3" class="image" />
            <img src="https://source.unsplash.com/random?nature=4" class="image" />
            <img src="https://source.unsplash.com/random?nature=5" class="image" />
            <img src="https://source.unsplash.com/random?nature=6" class="image" />
        </div>
        <div class="photo-column">
            <img src="https://source.unsplash.com/random?city=7" class="image" />
            <img src="https://source.unsplash.com/random?car=8" class="image" />
            <img src="https://source.unsplash.com/random?village=9" class="image" />
            <img src="https://source.unsplash.com/random?city=10" class="image" />
            <img src="https://source.unsplash.com/random?city=11" class="image" />
            <img src="https://source.unsplash.com/random?city=12" class="image" />
        </div>
        <div class="photo-column">
            <img src="https://source.unsplash.com/random?car=13" class="image" />
            <img src="https://source.unsplash.com/random?city=14" class="image" />
            <img src="https://source.unsplash.com/random?tree=15" class="image" />
            <img src="https://source.unsplash.com/random?tree=16" class="image" />
            <img src="https://source.unsplash.com/random?car=17" class="image" />
            <img src="https://source.unsplash.com/random?city=18" class="image" />
        </div>
    </div>

Have a photo-column div with as many columns you want for your gallery page. We will use the flex & flex-direction to align the images despite of their height & width. The flex will adjust the image dimension to fit the parent flex element.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    padding: 20px;
    background: #f7f4ed;
}
.title {
    padding: 40px;
    text-align: center;
    text-transform: uppercase;
}
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    max-width: 1000px;
    margin: auto;
}
.photo-coloumn {
    display: flex;
    flex-direction: column;
}
.image {
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: 0.25s;
}
.image:hover {
    transform: scale(1.1);
}

@media screen and (min-width: 600px) {
    .container {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 992px) {
    .container {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

We are using display:grid & grid-template-column to decide the number of columns in the images. In our example we have used mobile responsive with min-width. The space between images vertically is done with margin-bottom. We have added a hover animation on image to scale it with transition of 0.25 seconds.

If you are having lots of images & it the images are not loading, you can use the loading="lazy" attribute to lazily load the images.

Read our other blogs here 👇

• Generate Random Color with JavaScript
• Create beautiful Profile Card with HTML & CSS
• Star Rating with HTML and CSS

Happy Coding!