How do I make a responsive image gallery website using a CSS grid?

If you want to make a responsive image gallery website using a CSS grid then I provide you step by step guide to make a responsive image gallery

If you want to make a responsive image gallery website using a CSS grid then I provide you step by step guide to make a responsive image gallery website. 

Guys, if you are a beginner in CSS grid and you want to make a portfolio website then you have good knowledge of flexbox and CSS grid. If you are manually set all images one by one using position then it takes more time. 

Sandesh Tandan


We are using simple code and make a responsive image gallery. We are also making a responsive header and footer.

HTML

<!DOCTYPE html>
<html lang="en">
<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>Freepik</title>
    <link rel="stylesheet" href="coding.css">
</head>
<body>
    <div class="topnav">
        <ul>
            <li> <a href="">Home</a> </li>
            <li> <a href="">Blog</a> </li>
            <li> <a href="">Tools</a> </li>
            <li> <a href="">Contact</a> </li>
        </ul>
    </div>
   <div class="container">
<div class="image">
    <img src="img1.jpg" alt="img">
</div>
<div class="image">
    <img src="img3.jpg" alt="img">
</div>
<div class="image">
    <img src="img4.jpg" alt="img">
</div>

<div class="image">
    <img src="img5.jpg" alt="img">
</div>
<div class="image">
    <img src="img6.jpg" alt="img">
</div>
<div class="image">
    <img src="img8.jpg" alt="img">
</div>
<div class="image">
    <img src="img7.jpg" alt="img">
</div>
<div class="image">
    <img src="img4.jpg" alt="img">
</div>
<div class="image">
    <img src="img3.jpg" alt="img">
</div>
<div class="image">
    <img src="img7.jpg" alt="img">
</div>
<div class="image">
    <img src="img9.jpg" alt="img">
</div>
<div class="image">
    <img src="img6.jpg" alt="img">
</div>
   </div>
   <footer>
       <p>Copyright&copy;2021 All Right Reserve</p>
   </footer>
</body>
</html>


CSS

*{
    box-sizingborder-box;
    margin0px;
    padding0px;
}

 .topnav{
     background-colorindianred;
     overflowauto;
     width100%;
 }

 .topnav ul {
    displayflex;
    padding0px;
    margin0px;
    floatleft;
    list-stylenone;
    width100%;

 }
n        
 .topnav ul li{
inline-size5rem;
list-stylenone;
font-familysans-serif;
font-weightbold;


 }

 .topnav ul li a{
     displayblock;
     padding20px;
     text-decorationnone;
     font-size18px;
     colorwhite;
 }

 .topnav ul li a:hover{
     background-colorskyblue;
     colorblack;
 }

.container{
  displayflex;
  flex-wrapwrap;
  padding0 4px;
  
}

.image{
    flex:25%;
    max-width25%;
    padding0 4px;
 
}

.image img{
    margin-top8px;
    vertical-alignmiddle;
    width100%;
}

@media(max-width:800px){
    .image{
        flex50%;
        max-width50%;
    }
}

@media(max-width:600px){
    .image{
        flex100%;
        max-width100%;
    }
}

footer{
  margin-top1rem;
    left0;
    bottom0;
    width100%;
    background-colorrgb(2684190);
    colorwhite;
    text-aligncenter;
}

footer p{
 
    padding1rem;
}



1) What do we do in HTML to make a responsive image gallery?

In HTML, We start with the topnav division. And take UL(Unordered List), li(List Item), an anchor tag. We take the anchor tag to provide a link in the list item.

Now it's time to write container division for all image galleries.  And after that, we take image division for all images. And add all images under the image division.

You need to provide alternative text on all images. 


There are some important properties you need to consider while writing CSS code. Just like display: flex, flex, max-width, left, right, overflow, @media, etc are important properties in CSS.

a) Flexbox

Flexbox helps you to create a responsive image gallery. It is introduced in CSS 3 for making web layouts. The flex automatically arranged elements in the container depending upon the screen.

b) Media Queries

Media queries are used for making responsive web layouts on different devices. You can use media queries in an image gallery for how many columns show on desktop, tablet, and mobile devices.