<div class="grid-image-container">
  <picture>
    <source media="(min-width: 1081px)" srcset="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=q-100,e-sharpen,w-800">
    <source media="(min-width: 721px)" srcset="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=q-100,e-sharpen,w-500,h-400,fo-auto">
    <img src="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=q-100,e-sharpen,w-320,h-320,fo-auto" />
  </picture>
</div>
<div class="grid-image-container">
  <picture>
    <source media="(min-width: 1081px)" srcset="https://ik.imagekit.io/demo/resp-img/image2.jpg?tr=q-100,e-sharpen,w-800">
    <source media="(min-width: 721px)" srcset="https://ik.imagekit.io/demo/resp-img/image2.jpg?tr=q-100,e-sharpen,w-500,h-400,fo-auto">
    <img src="https://ik.imagekit.io/demo/resp-img/image2.jpg?tr=q-100,e-sharpen,w-320,h-320,fo-auto" />
  </picture>
</div>
<div class="grid-image-container">
  <picture>
    <source media="(min-width: 1081px)" srcset="https://ik.imagekit.io/demo/resp-img/image3.jpg?tr=q-100,e-sharpen,w-800">
    <source media="(min-width: 721px)" srcset="https://ik.imagekit.io/demo/resp-img/image3.jpg?tr=q-100,e-sharpen,w-500,h-400,fo-auto">
    <img src="https://ik.imagekit.io/demo/resp-img/image3.jpg?tr=q-100,e-sharpen,w-320,h-320,fo-auto" />
  </picture>
</div>
<div class="grid-image-container">
  <picture>
    <source media="(min-width: 1081px)" srcset="https://ik.imagekit.io/demo/resp-img/image5.jpg?tr=q-100,e-sharpen,w-800">
    <source media="(min-width: 721px)" srcset="https://ik.imagekit.io/demo/resp-img/image5.jpg?tr=q-100,e-sharpen,w-500,h-400,fo-auto">
    <img src="https://ik.imagekit.io/demo/resp-img/image5.jpg?tr=q-100,e-sharpen,w-320,h-320,fo-auto" />
  </picture>
</div>
<div class="grid-image-container">
  <picture>
    <source media="(min-width: 1081px)" srcset="https://ik.imagekit.io/demo/resp-img/image4.jpg?tr=q-100,e-sharpen,w-800">
    <source media="(min-width: 721px)" srcset="https://ik.imagekit.io/demo/resp-img/image4.jpg?tr=q-100,e-sharpen,w-500,h-400,fo-auto">
    <img src="https://ik.imagekit.io/demo/resp-img/image4.jpg?tr=q-100,e-sharpen,w-320,h-320,fo-auto" />
  </picture>
</div>
<div class="grid-image-container">
  <picture>
    <source media="(min-width: 1081px)" srcset="https://ik.imagekit.io/demo/resp-img/image6.jpg?tr=q-100,e-sharpen,w-800">
    <source media="(min-width: 721px)" srcset="https://ik.imagekit.io/demo/resp-img/image6.jpg?tr=q-100,e-sharpen,w-500,h-400,fo-auto">
    <img src="https://ik.imagekit.io/demo/resp-img/image6.jpg?tr=q-100,e-sharpen,w-320,h-320,fo-auto" />
  </picture>
</div>
body {
  font-size: 0;
}

.grid-image-container {
  width: 100%;
  max-width: 800px;
  overflow: hidden;
  text-align:center;
  margin: 10px auto;
}

.grid-image {
  width: 100%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.