Fluid CSS Gallery
Tags: css, html, gallery, responsive
Published: 2020-11-12 07:09:20

**[YouTube Video by me](https://www.youtube.com/watch?v=NfkiuFgxWpI)**

---

Today we're going to learn how to implement the fluid image gallery where the column of the gallery is responsive according to the height of the image.

Here we would be using **CSS Flex** to achieve responsiveness.

We would be using 3 columns for the widescreen and one column for the smaller screen.

---

**Final Outcome**

![Website outcome](https://dev-to-uploads.s3.amazonaws.com/i/2c0hphifbbkaxhlbiywh.png)

---

**Codepen**

{% codepen https://codepen.io/arc-coder/pen/GRqwaBY %}

---

**HTML Code**

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css">
        <title>Fluid CSS Gallery</title>
    </head>
    <body>
        <div class="row">
            <div class="column">
                <img
                    src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/38867/pexels-photo-38867.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1378849/pexels-photo-1378849.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />
            </div>
            <div class="column">
                <img
                    src="https://images.pexels.com/photos/1389994/pexels-photo-1389994.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/320014/pexels-photo-320014.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />
            </div>
            <div class="column">
                <img
                    src="https://images.pexels.com/photos/39317/chihuahua-dog-puppy-cute-39317.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1452717/pexels-photo-1452717.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/129634/pexels-photo-129634.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />
            </div>
        </div>
    </body>
</html>
```

---

**CSS Code**

```
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.column {
    flex: 25%;
    max-width: 33.3%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    filter: grayscale(1) brightness(0.5);
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s linear;
}

.column img:hover {
    filter: grayscale(0);
}

@media screen and (max-width: 800px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
    .column img {
        filter: grayscale(0) brightness(1);
    }
}
```