Mission 8: Responsive Breakpoint

เป้าหมายของ Mission นี้: ปรับ Layout ตามขนาดจอด้วย @media

Mobile-First คืออะไร

เขียน CSS แบบ mobile-first คือกำหนดค่าเริ่มต้น (ไม่มี @media ครอบ) ให้ เหมาะกับจอเล็กสุดก่อนเสมอ แล้วค่อยใช้ @media (min-width: ...) เพิ่มการ เปลี่ยนแปลงสำหรับจอที่ใหญ่ขึ้นทีละขั้น

@media (min-width: ...)

.wrapper {
  grid-template-columns: 1fr; /* ค่าเริ่มต้น: จอเล็ก = 1 คอลัมน์ */
}

@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: repeat(2, 1fr); /* จอกลาง = 2 คอลัมน์ */
  }
}

@media (min-width: 1024px) {
  .wrapper {
    grid-template-columns: repeat(3, 1fr); /* จอใหญ่ = 3 คอลัมน์ */
  }
}

min-width: 768px แปลว่า "กฎนี้ใช้เมื่อจอกว้างอย่างน้อย 768px ขึ้นไป"