How to align Picture boxes in CSS

Question

I am a fresher and we were taught HTML and CSS with a little bit of javascript. Now I am working on a project which shows the current latest news from some API. The API and Javascript fetching part is done by a senior in my team. My job is to put it all up in a fancy looking UI.

(With the help of w3schools) I have managed to put it as I want as shown below. My problem is that, On some screens it is not fitting and hence there are empty spots and every thing is misaligned and messy. Can anyone help me with any useful suggestions?

Below is the picture of what I've developed and what my problem is. The code follows. Thank you!

Link to Image

div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto; 
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }

HTML Code is as follows. This is the basic format that is used in Javascript inside a loop, through which each news gets displayed.

<div class="responsive">
    <div class="gallery">
       <img src={Image link here} alt="Link broken" width="600" height="400" />
           <div class="desc">
               {Post details here}
           </div>
     </div>
</div>

Answer 1

Please try this instead,

I used grid method for align this. And media queries used for responsive in specific devices.

.responsive {
  padding: 10px 6px;
  width:100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
}
@media only screen and (max-width: 1200px){
  .responsive {grid-template-columns: auto auto auto;}
}
@media only screen and (max-width: 768px){
  .responsive {grid-template-columns: auto auto;}
}
@media only screen and (max-width: 576px) {
  .responsive {grid-template-columns: auto;}
}

div.gallery {
  border: 1px solid #ccc;
  margin:10px;
}
div.gallery:hover {
   border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto; 
}
div.desc {
  padding: 15px;
  text-align: center;
}
.responsive {
  padding: 10px 6px;
  width:100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
}
@media only screen and (max-width: 1200px){
  .responsive {grid-template-columns: auto auto auto;}
}
@media only screen and (max-width: 768px){
  .responsive {grid-template-columns: auto auto;}
}
@media only screen and (max-width: 576px) {
  .responsive {grid-template-columns: auto;}
}

<div class="responsive">
  <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">1</div>
   </div>
   <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">2</div>
   </div>
   <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">3</div>
   </div>
   <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">4</div>
   </div>
   <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">5</div>
   </div>
   <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">6</div>
   </div>
   <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">7</div>
   </div>
   <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">8</div>
   </div>
        <div class="gallery">
     <img src=https://i.sstatic.net/NnPLf.png alt="Link broken" width="600" height="400" />
       <div class="desc">9</div>
   </div>
</div>