DEV Community

loading...
Cover image for Fluid CSS Gallery

Fluid CSS Gallery

Arc Coder | Harsh Patel
Coffee and code.
Updated on ・2 min read

YouTube Video by me


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


Codepen


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>
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)