แผนฝึกบทที่ 10
แบบฝึกปฏิบัติ
ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้
สร้างกริด repeat(3, 1fr) พร้อม gap แล้วใส่กล่อง 6 อัน
ทำเลย์เอาต์ 240px + 1fr สำหรับ sidebar + main
ใช้ grid-column ให้กล่องแรกคร่อมเต็มความกว้าง
วาดหน้า header/nav/main/footer ด้วย grid-template-areas
ซ้อน Flex ใน nav ภายในกริด
จงใจลบ display:grid แล้วใส่กลับ — สังเกตอาการใน DevTools
ใช้เพื่อเรียนรู้เท่านั้น