สร้าง Grid รูปภาพที่ปรับจำนวนคอลัมน์ตามขนาดหน้าจอ ใช้ Flexbox + Flex-wrap + Media Queries รองรับ 3/2/1 คอลัมน์
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <style> * { box-sizing: border-box; } h1 { text-align: center; } .outer-grid { display: flex; flex-wrap: wrap; padding: 0 4px; } .inner-grid { flex: 25%; max-width: 25%; padding: 0 4px; } .inner-grid img { margin-top: 8px; width: 100%; padding: 10px; } @media screen and (max-width: 800px) { .inner-grid { flex: 50%; max-width: 50%; } } @media screen and (max-width: 600px) { .inner-grid { flex: 100%; max-width: 100%; } } </style> <body> <h1>Responsive Image Grid Example</h1> <div class="outer-grid"> <div class="inner-grid"> <img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> </div> <div class="inner-grid"> <img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> </div> <div class="inner-grid"> <img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> </div> </div> </body> </html>
การทำงาน
- .outer-grid { display: flex; flex-wrap: wrap; } - Flex Container ให้ขึ้นบรรทัดใหม่
- .inner-grid { flex: 25%; max-width: 25%; } - 4 คอลัมน์ (100%/25%=4)
- @media 800px -> 50% = 2 คอลัมน์
- @media 600px -> 100% = 1 คอลัมน์
- Padding 4px ทั้ง Container และ Item สร้าง Gutter 8px
วิธีทันสมัย: CSS Grid
.outer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
CSS Grid ทำได้ในบรรทัดเดียว ไม่ต้อง Media Query รองรับทุกขนาดอัตโนมัติ
ผลลัพธ์
กริด 3 คอลัมน์ x 3 แถว = 9 รูป ลดหน้าจอ -> 2 คอลัมน์ -> 1 คอลัมน์
