Mobile-first คืออะไร
เริ่มจากจอแคบก่อน
Mobile-first = เขียนสไตล์ฐานสำหรับจอแคบ (คอลัมน์เดียว ระยะกระชับ) แล้วใช้ min-width เพิ่มความซับซ้อนเมื่อจอกว้างขึ้น
เทียบกับ desktop-first
Desktop-first เริ่มจากจอกว้างแล้วใช้ max-width ตัดของออกบนมือถือ — ทำได้ แต่บทนี้ฝึก mobile-first เพราะเข้ากับเนื้อหาที่ไหลจากง่ายไปซับซ้อน
/* ฐาน: มือถือ */
.cards { display: grid; gap: 1rem; }
/* จอกว้างขึ้นค่อยเพิ่มคอลัมน์ */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}