<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
  
<body>
        

    <div class="wrapper">
      <div class="fun">
        <img src="https://source.unsplash.com/random/200x150" alt="">
      </div>
     
      <div class="fun">
        <img src="https://source.unsplash.com/random/200x151" alt="">
      </div>
     
      <div class="fun">
        <img src="https://source.unsplash.com/random/200x152" alt="">
      </div>
     
      <div class="fun">
        <img src="https://source.unsplash.com/random/200x153" alt="">
      </div>
     
      <div class="fun">
        <img src="https://source.unsplash.com/random/200x154" alt="">
      </div>
     
      <div class="fun">
        <img src="https://source.unsplash.com/random/200x155" alt="">
      </div>
     
    </div>

</body>
</html>

html{


  background-color: darkgrey;
}




.wrapper {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    grid-auto-rows: minmax(50px, 125px);
    margin: 1rem;
    /* flex-wrap: wrap; */

}

 img {

  object-fit: cover;
  width: 100%;
  max-height: 100%;
  border-radius: 15px;
  
/*   box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.7); */
  filter: saturate(40%);
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, filter 0.3s ease-out;
}



  img:hover {

    box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
    filter: saturate(100%);

  }




  .fun {
    grid-column: 1fr ;
    grid-row: 1fr;
  }
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.