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
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>
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);
}
}
Top comments (0)