HTML Layouts

Set width: full 320 480 640 768 1024 1920 custom
Source code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Image Gallery with Lightbox</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 2rem; background: #f7f7f7; }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
      max-width: 900px;
      margin: 0 auto;
    }
    .gallery img {
      width: 100%;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }
    .gallery img:hover {
      transform: scale(1.04);
      box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    }
    .lightbox-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .lightbox-overlay.active { display: flex; }
    .lightbox-img {
      max-width: 90vw;
      max-height: 80vh;
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      background: #fff;
      padding: 0.5rem;
    }
    .lightbox-close {
      position: absolute;
      top: 2rem;
      right: 2rem;
      background: none;
      border: none;
      color: #fff;
      font-size: 2rem;
      cursor: pointer;
      z-index: 1001;
    }
    @media (max-width: 600px) {
      body { padding: 1rem; }
      .gallery { gap: 0.5rem; }
      .lightbox-close { top: 1rem; right: 1rem; }
    }
  </style>
</head>
<body>
  <div class="gallery">
    <img src="https://picsum.photos/id/1015/400/300" alt="Gallery Image 1">
    <img src="https://picsum.photos/id/1016/400/300" alt="Gallery Image 2">
    <img src="https://picsum.photos/id/1018/400/300" alt="Gallery Image 3">
    <img src="https://picsum.photos/id/1020/400/300" alt="Gallery Image 4">
    <img src="https://picsum.photos/id/1024/400/300" alt="Gallery Image 5">
    <img src="https://picsum.photos/id/1025/400/300" alt="Gallery Image 6">
  </div>
  <div class="lightbox-overlay" id="lightboxOverlay">
    <button class="lightbox-close" id="lightboxClose" aria-label="Close">&times;</button>
    <img class="lightbox-img" id="lightboxImg" src="" alt="Large preview">
  </div>
  <script>
    const galleryImages = document.querySelectorAll('.gallery img');
    const lightboxOverlay = document.getElementById('lightboxOverlay');
    const lightboxImg = document.getElementById('lightboxImg');
    const lightboxClose = document.getElementById('lightboxClose');
    galleryImages.forEach(img => {
      img.addEventListener('click', () => {
        lightboxImg.src = img.src;
        lightboxImg.alt = img.alt;
        lightboxOverlay.classList.add('active');
      });
    });
    lightboxClose.addEventListener('click', () => {
      lightboxOverlay.classList.remove('active');
      lightboxImg.src = '';
    });
    lightboxOverlay.addEventListener('click', (e) => {
      if (e.target === lightboxOverlay) {
        lightboxOverlay.classList.remove('active');
        lightboxImg.src = '';
      }
    });
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        lightboxOverlay.classList.remove('active');
        lightboxImg.src = '';
      }
    });
  </script>
</body>
</html>