<main>
  <figure>
    <img 
         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>
    <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">
  </figure>
  
  <figure>
    <img src="https://res.cloudinary.com/sealuse-creatives/image/upload/c_fill,g_auto,h_700,w_700/v1548054733/Electronics/Games/Xbox/Xbox-One-X-header-640x360.jpg" alt="X Box One X">
  </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;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
  }

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

@media(min-width: 900px) {
  main {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
  }
} */

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.