ฝึกประกอบสามเลย์เอาต์

ในหน้าเดียว มี nav แถวบน · hero กึ่งกลาง · แถวการ์ดด้านล่าง

• nav ใช้ space-between + align-items: center

• hero ใช้ column + กึ่งกลางสองแกน + min-height

• การ์ดใช้ flex-wrap + gap และมีอย่างน้อย 3 ใบ

• ไม่ใช้ float เพื่อจัดแถวเหล่านี้

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

ประกอบหน้าตามสเปกให้ครบสามส่วน

แยก class .nav .hero .cards ชัดเจน

ปานกลาง

ย่อหน้าต่างเบราว์เซอร์แล้วตรวจว่าการ์ดห่อบรรทัด

ง่าย

เปลี่ยน hero เป็น row ชั่วคราว แล้วอธิบายว่าทำไมตำแหน่งเปลี่ยน

ยาก