Responsive web design is a design method that helps the developer adjust CSS to adapt any website to any screen size available in today's world. We all know that a chameleon can change its size and shape according to the situation. Responsive web design works exactly like that. Today we are going to create a simple CSS Responsive Image Gallery that can adapt to any device from big to small. We have provided a video tutorial below for your convenience.
We hope you have seen the tutorial about responsive image gallery using the CSS display grid feature. If you have a collection of images that you want to display on your website.
You May Also Like:
You can use the CSS display grid feature to create a responsive image gallery with those images. By following this CSS technique, your images will be resized and rearranged to perfectly fit any screen size. This type of responsive image gallery can also be created with CSS Flexbox. CSS Flexbox is a one-dimensional layout system. CSS Grid is a two-dimensional layout system, providing both rows and columns, making it suitable for complex layouts.
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ecf4fb;
}
.wrapper {
width: 80%
margin: 50px auto
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 30px;
}
.wrapper img {
width: 100%;
cursor: pointer
transition: 1s ease;
}
.wrapper img:hover {
transform: scale(0.9);
}
For the Original Post Click Here
Top comments (0)