Masonry Gallery Pure CSS

<h2>Masonry Gallery Pure Css</h2>
   <div class="masonry-gallery">
           <div class="gallery">
               <img src="https://images.pexels.com/photos/243756/pexels-photo-243756.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/937606/pexels-photo-937606.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/799490/pexels-photo-799490.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/97905/pexels-photo-97905.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/936722/pexels-photo-936722.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/688010/pexels-photo-688010.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
           </div>
           <div class="gallery">
               <img src="https://images.pexels.com/photos/788213/pexels-photo-788213.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/940916/pexels-photo-940916.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/573259/pexels-photo-573259.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/175689/pexels-photo-175689.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/638453/pexels-photo-638453.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/401107/pexels-photo-401107.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
           </div>
           <div class="gallery">
               <img src="https://images.pexels.com/photos/65834/pexels-photo-65834.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/799490/pexels-photo-799490.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/134392/pexels-photo-134392.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/759668/pexels-photo-759668.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
              <img src="https://images.pexels.com/photos/103127/pexels-photo-103127.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/697243/pexels-photo-697243.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
           </div>
           <div class="gallery">
               <img src="https://images.pexels.com/photos/688659/pexels-photo-688659.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/673865/pexels-photo-673865.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/709575/pexels-photo-709575.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/799490/pexels-photo-799490.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/673920/pexels-photo-673920.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
               <img src="https://images.pexels.com/photos/936722/pexels-photo-936722.jpeg?h=350&auto=compress&cs=tinysrgb" alt="">
           </div>
   </div>

 * { box-sizing:border-box; margin: 0; padding: 0;}
h2 { text-align: center; margin: 40px 0px; font-size: 35px;}
.masonry-gallery {
    display: flex;
    flex-wrap: wrap; padding: 5px; 
}
.gallery {
    flex: 25%;
    max-width: 25%;
    padding:5px;
}
.gallery img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

@media (max-width:768px) {
.gallery {
    flex: 50%; 
    max-width: 50%;
}
}
@media (max-width:600px) {
    .gallery {
        flex: 100%; 
        max-width: 100%;
    }
    }