Grid

Workshop 1: Photo Gallery

สร้าง gallery รูปภาพแบบ 3 คอลัมน์ โดยใช้ `grid-template-columns: repeat(3, 1fr)` แบ่งพื้นที่เท่า ๆ กัน และ `gap` คุมช่องว่างระหว่าง cell — สังเกตว่า `fr` กระจายพื้นที่ที่เหลือให้อัตโนมัติ

Workshop 2: Dashboard Layout

สร้าง dashboard ที่มี header, sidebar, content หลัก และ footer โดยใช้ `grid-template-areas` กำหนดชื่อพื้นที่ และ `grid-area` วาง element แต่ละส่วนลงในตำแหน่งที่ต้องการ — เมื่อต้องการเปลี่ยน layout ทั้งหน้า แก้ที่ `grid-template-areas` ที่เดียว

Workshop 3: App Shell with Named Areas

สร้าง app shell ที่มี topbar, rail, workspace และ inspector ด้วย `grid-template-areas` — use case นี้ต่างจาก dashboard พื้นฐานตรงที่เหมาะกับ layout แบบ editor หรือเครื่องมือทำงานที่มี panel หลายฝั่ง เมื่ออยากย้าย panel สามารถแก้แผนผัง named areas ที่ parent ได้โดยไม่ต้องแก้ HTML

Workshop 4: Responsive Product Grid

สร้าง product grid ที่ปรับจำนวนคอลัมน์อัตโนมัติตามความกว้างหน้าจอ โดยไม่ต้องเขียน media query — `auto-fit` จัดวาง column ให้เต็มแถว และ `minmax(200px, 1fr)` กำหนดขนาดขั้นต่ำ 200px แต่ขยายเต็มพื้นที่ที่เหลือได้

Workshop 5: Magazine Article Layout

สร้าง layout แบบนิตยสารที่บทความหลักกินพื้นที่ 2 คอลัมน์และ 2 แถว โดยใช้ `grid-column: span 2` และ `grid-row: span 2` — ให้ grid จัด item ที่เหลือโดยอัตโนมัติรอบบทความหลัก