<main>
  <figure>
   <img 
         srcset="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_300,w_300/v1548054527/Electronics/Games/Ps4%20Slim/71mhYVWikeL._SX425_.jpg 300w,
                 https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1548054527/Electronics/Games/Ps4%20Slim/71mhYVWikeL._SX425_.jpg 700w,
                 https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_1000,w_1000/v1548054527/Electronics/Games/Ps4%20Slim/71mhYVWikeL._SX425_.jpg 1000w"
         
         
         sizes="(max-width: 700px) 100vw, (max-width: 900px) 50vw, 33vw"
         
         src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1548054527/Electronics/Games/Ps4%20Slim/71mhYVWikeL._SX425_.jpg"
         alt="PS4 Slim">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1548054723/Electronics/Games/Xbox/44d25001-ea01-40bc-9455-34c6b9597db0.jpg" alt="X Box One S">
  </figure>
  
  <figure>
   <picture>
     <source media="(min-width: 900px)" srcset="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_1400,w_700/v1548751520/Electronics/ali-yahya-761317-unsplash.jpg">
     
      <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1548751520/Electronics/ali-yahya-761317-unsplash.jpg" alt="Camera lens">
    </picture>
  </figure>
  
  <figure>
    <picture>
      <source media="(min-width: 700px)" srcset="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_1000,w_1000/v1548054203/Electronics/Games/Ps4%20Slim/shutterstock_1019064169.jpg"></source>
    </picture>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1548054203/Electronics/Games/Ps4%20Slim/shutterstock_1019064169.jpg" alt="PS4 Pro">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1547893370/Electronics/Laptops/Dell/shutterstock_738586432.jpg" alt="Dell Laptop">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1547893901/Electronics/Laptops/HP/shutterstock_1106477300_1.jpg" alt="HP Laptop">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1547892521/Electronics/Laptops/Macbook/Macbook_Pro.jpg" alt="MacBook Pro">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1547892581/Electronics/Laptops/Surface%20book/Surface_Book.jpg" alt="Surface Book">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1547892302/Electronics/Laptops/Macbook%20air/Macbook-Air.jpg" alt="MacBook Air">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1548060977/Electronics/TVs/shutterstock_1132303250.jpg" alt="Tv">
  </figure>
  
  
</main>
main {
    display: grid;
  }

@media(min-width: 700px) {
  main {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width: 900px) {
  main {
    grid-template-columns: repeat(3, 1fr)
  }
  figure:nth-child(3) {
    grid-row: span 2
  }
  figure:nth-child(4) {
    grid-column: span 2;
    grid-row: span 2
  }
}

img {
  max-width: 100%
}
// const imgLength = 9;

// const randomImageNumber = Math.floor(Math.random() * imgLength) + 1;

// const imageCells = document.querySelectorAll('figure');

// const randomCell = imageCells[randomImageNumber-1];

// console.log(randomCell.style)
// imageCells[randomImageNumber-1].style.gridColumn = 'span 2';
// imageCells[randomImageNumber-1].style.gridRow = 'span 2';

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.