Styling Track
CSS
Tailwind Essentials
Tailwind flex & grid layout
ฝึกใช้ flex, grid, gap, justify-* และ items-* ใน Tailwind เพื่อวาง layout หนึ่งมิติและสองมิติก่อนทำ workshop
เลือก flex หรือ grid ให้ถูกงาน
ใช้ flex เมื่อต้องจัดของเป็นแถวหรือคอลัมน์เดียว เช่น navbar, button group, profile row ใช้ grid เมื่อต้องจัดหลายคอลัมน์หรือหลายแถวพร้อมกัน เช่น card list, gallery, dashboard widgets ใน Tailwind class หลักจะตรงกับ CSS เดิมมาก เช่น flex, items-center, justify-between, grid, grid-cols-3 และ gap-4
| งาน | Class ที่มักใช้ | เหตุผล |
|---|---|---|
| navbar | flex items-center justify-between | จัดซ้าย/ขวาในแนวเดียว |
| tag list | flex flex-wrap gap-2 | รายการไหลขึ้นบรรทัดใหม่ได้ |
| video cards | grid grid-cols-1 gap-4 | จัดหลาย card เป็นชุด |