มือใหม่หลายคนถามว่า “ควรใช้ Grid หรือ Flexbox?” คำตอบสั้นที่สุดคือ ใช้ทั้งคู่ แต่ใช้ให้ถูกงาน
กฎข้อเดียว
- Flexbox — จัดของใน ทิศทางเดียว (แถวเดียว หรือคอลัมน์เดียว)
- Grid — จัดของใน สองทิศทาง พร้อมกัน (ทั้งแถวและคอลัมน์)
Flexbox: แถบเมนู
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}ของเรียงเป็นแถวเดียว ช่องว่างกระจายอัตโนมัติ เหมาะกับเมนู ปุ่มหลายปุ่ม หรือการ์ดที่มีไอคอนกับข้อความ
Grid: การ์ดสินค้า
.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}บรรทัดเดียวได้การ์ดที่ปรับจำนวนคอลัมน์ตามขนาดจอเอง ไม่ต้องเขียน media query
เคล็ดลับถ้าต้องคิดถึงทั้ง “แถว” และ “คอลัมน์” พร้อมกัน แปลว่าถึงเวลาใช้ Grid แล้ว
ใช้ร่วมกัน
เลย์เอาต์จริงส่วนใหญ่ใช้ Grid วางโครงหน้า (header, sidebar, content) แล้วใช้ Flexbox จัดของเล็กๆ ข้างในแต่ละช่อง เช่น ปุ่มในการ์ด