Responsive Grid image Gallery using CSS

In this blog, we will share a snippet about a responsive CSS image gallery. We will apply the CSS grid layout module to design this responsive web layout. Before that please follow the video tutorial below in order to have a proper idea about the snippet. We have lots of videos on similar types of topics on our YouTube Channel. If you like the videos on our channel, you can subscribe to learn front-end development.

I hope you have gone through the entire video tutorial. We have used the CSS grid layout here instead of other conventional methods. Now, what is CSS Grid layout? It is a grid-based layout method. It makes the web layout design easier. We don't have to use CSS floats and positioning in this method. In this method, you need to have a parent div with its child elements inside. All the elements of HTML will become a grid container when the display property is set to the grid. You can also use an inline grid.

If you apply this grid method all the elements inside a container will become grid items. In this snippet, grid-template-columns mean the size of the columns. It also means how many columns are in the design. In the snippet, we used grid-auto-rows, which means the row size of the project. The grid-auto-flow property indicates how elements in the grid container are inserted. The grid gaps specify the gaps between rows and columns of the project. We have used CSS media queries to make this project responsive for all small devices.

You may also like:

Responsive Grid Image Gallery [ Source Code ]:

Create the required HTML and CSS file for the project. Copy the code from the below code boxes and paste them into your project. Save and open it in your browser. If the code is not working, you can also download the code from the download button below.

ADD 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 Grid image Gallery using HTML CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="img-area">
      
      <div class="wrapper">
        <div class="single-box">
          <a href="#"><img src="img/5.jpg" /></a>
        </div>
        <div class="single-box">
          <a href="#"><img src="img/6.jpg" /></a>
        </div>
        <div class="single-box">
          <a href="#"><img src="img/1.jpg" /></a>
        </div>
        <div class="single-box">
          <a href="#"><img src="img/2.jpg" /></a>
        </div>
        <div class="single-box">
          <a href="#"><img src="img/3.jpg" /></a>
        </div>
        <div class="single-box">
          <a href="#"><img src="img/4.jpg" /></a>
        </div>
      </div>
    </div>

    
  </body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.img-area {
	background-color: #dee;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	padding: 20px;
}
.wrapper {
	max-width: 1280px;
	margin: 0 auto;
	padding: 50px 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-auto-rows: 280px;
	grid-auto-flow: dense;
	grid-gap: 25px;
	width: 100%;
}
.single-box {
	position: relative;
}
.single-box a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.single-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s;
	user-select: none;
}
.single-box a:hover img {
	transform: rotate(5deg) scale(1.4);
}
@media (max-width: 768px) {
	.img-area {
		padding: 0;
	}
	.wrapper {
		max-width: 100%;
		padding: 0;
	}
}

I hope the code is working for you. You can get more by clicking the load more button on the homepage of this website. Thank you for visiting our website.

DOWNLOAD CODE

Responsive Grid Image Gallery [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Grid image Gallery using CSS

Responsive Grid Image Gallery [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form