สร้างแกลเลอรี่รูปภาพตอบสนอง (Responsive) ด้วย CSS

การสร้างแกลเลอรี่รูปภาพที่ตอบสนองตามขนาดหน้าจอ (Responsive) สามารถทำได้ด้วย CSS Grid หรือ Flexbox ร่วมกับ Media Queries

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    div.myGallery {
      border: 2px solid orange;
    }
    div.myGallery:hover {
      border: 1px solid blue;
    }
    div.myGallery img {
      width: 100%;
      height: auto;
    }
    div.desc {
      padding: 20px;
      text-align: center;
    }
    .responsive {
      padding: 0 5px;
      float: left;
      width: 24.99999%;
    }
    @media only screen and (max-width: 700px) {
      .responsive {
        width: 49.99999%;
        margin: 5px 0;
      }
    }
    @media only screen and (max-width: 500px) {
      .responsive {
        width: 100%;
      }
    }
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="responsive">
    <div class="myGallery">
      <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
        <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial" width="600" height="500">
      </a>
      <div class="desc">3D Animation Tutorial</div>
    </div>
  </div>
  <div class="responsive">
    <div class="myGallery">
      <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg">
        <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial" width="600" height="500">
      </a>
      <div class="desc">Swift Video Tutorial</div>
    </div>
  </div>
  <div class="responsive">
    <div class="myGallery">
      <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg">
        <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial" width="600" height="500">
      </a>
      <div class="desc">CSS Tutorial</div>
    </div>
  </div>
  <div class="clearfix"></div>
</body>
</html>

คำอธิบาย: ใช้ float: left และ width: 24.99999% สำหรับ 4 คอลัมน์ บนหน้าจอเล็กกว่า 700px จะเป็น 2 คอลัมน์ (50%) และหน้าจอเล็กกว่า 500px จะเป็น 1 คอลัมน์ (100%) คลาส .clearfix ใช้แก้ปัญหา float collapsing