ฝึกสร้างเลย์เอาต์หน้า

สร้างโครงหน้าด้วย Grid ตามสเปก — ยังไม่ต้องสวยมาก ขอให้โครงสร้างถูก

• container มี display: grid

• อย่างน้อย 2 คอลัมน์ โดยใช้ fr อย่างน้อยหนึ่งค่า

• มี gap

• มีโซน header ที่คร่อมเต็มความกว้าง (span หรือ areas ก็ได้)

• เปิด DevTools ดู Grid overlay ยืนยันเส้นคอลัมน์

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

ทำตามสเปกด้านบนในไฟล์ HTML+CSS ของคุณ

header ใช้ grid-column: 1 / -1 หรือ areas ชื่อ header ซ้ำสองช่อง

ปานกลาง

สลับเป็น grid-template-areas แล้วได้ผลลัพธ์โครงเดิม

ปานกลาง

ใส่ Flex ในแถบ nav ภายในโซนกริดหนึ่งช่อง

ยาก