<div class="grid-image-container">
  <img src="https://ik.imagekit.io/demo/resp-img/image1.jpg"
      srcset="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320 320w,
              https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-480 480w,
              https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-720 720w"
       sizes="(max-width: 480px) 100vw, (max-width: 720px) 50vw, 33vw"
       class="grid-image" 
  />
</div>
<div class="grid-image-container">
  <img src="https://ik.imagekit.io/demo/resp-img/image2.jpg"
      srcset="https://ik.imagekit.io/demo/resp-img/image2.jpg?tr=w-320 320w,
              https://ik.imagekit.io/demo/resp-img/image2.jpg?tr=w-480 480w,
              https://ik.imagekit.io/demo/resp-img/image2.jpg?tr=w-720 720w"
       sizes="(max-width: 480px) 100vw, (max-width: 720px) 50vw, 33vw"
       class="grid-image" 
  />
</div>
<div class="grid-image-container">
  <img src="https://ik.imagekit.io/demo/resp-img/image3.jpg"
      srcset="https://ik.imagekit.io/demo/resp-img/image3.jpg?tr=w-320 320w,
              https://ik.imagekit.io/demo/resp-img/image3.jpg?tr=w-480 480w,
              https://ik.imagekit.io/demo/resp-img/image3.jpg?tr=w-720 720w"
       sizes="(max-width: 480px) 100vw, (max-width: 720px) 50vw, 33vw"
       class="grid-image" 
  />
</div>
<div class="grid-image-container">
  <img src="https://ik.imagekit.io/demo/resp-img/image4.jpg"
      srcset="https://ik.imagekit.io/demo/resp-img/image4.jpg?tr=w-320 320w,
              https://ik.imagekit.io/demo/resp-img/image4.jpg?tr=w-480 480w,
              https://ik.imagekit.io/demo/resp-img/image4.jpg?tr=w-720 720w"
       sizes="(max-width: 480px) 100vw, (max-width: 720px) 50vw, 33vw"
       class="grid-image" 
  />
</div>
<div class="grid-image-container">
  <img src="https://ik.imagekit.io/demo/resp-img/image5.jpg"
      srcset="https://ik.imagekit.io/demo/resp-img/image5.jpg?tr=w-320 320w,
              https://ik.imagekit.io/demo/resp-img/image5.jpg?tr=w-480 480w,
              https://ik.imagekit.io/demo/resp-img/image5.jpg?tr=w-720 720w"
       sizes="(max-width: 480px) 100vw, (max-width: 720px) 50vw, 33vw"
       class="grid-image" 
  />
</div>
<div class="grid-image-container">
  <img src="https://ik.imagekit.io/demo/resp-img/image6.jpg"
      srcset="https://ik.imagekit.io/demo/resp-img/image6.jpg?tr=w-320 320w,
              https://ik.imagekit.io/demo/resp-img/image6.jpg?tr=w-480 480w,
              https://ik.imagekit.io/demo/resp-img/image6.jpg?tr=w-720 720w"
       sizes="(max-width: 480px) 100vw, (max-width: 720px) 50vw, 33vw"
       class="grid-image" 
  />
</div>
body {
  font-size: 0;
}

.grid-image-container {
  width: 32%;
  display: inline-block;
  vertical-align: top;
  height: 200px;
  overflow: hidden;
  margin: 0 0.5% 1% 0.5%;
}

.grid-image {
  width: 100%;
  min-height: 200px;
}

@media(max-width: 720px) {
  .grid-image-container {
    width: 49%;
  }
}

@media(max-width: 480px) {
  .grid-image-container {
    width: 99%;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.