CSS Layout — Flexbox & Grid

ทุกการตัดสินใจในงานออกแบบล้วนวนกลับมาที่คำถามเดียว: องค์ประกอบนี้ควรอยู่ที่ไหน? Layout คือคำตอบ เป็นระบบล่องหนที่ยึดอินเทอร์เฟซทั้งหมดของคุณไว้ด้วยกัน เหมือนกับระบบ grid ใน Figma ที่ทำให้ทุกหน้าจอดูสอดคล้องกัน

ข่าวดีสำหรับนักออกแบบ: CSS layout ไม่ใช่เรื่องยาก เพราะแมปเกือบแบบหนึ่งต่อหนึ่งกับเครื่องมือที่คุณใช้ใน Figma ทุกวัน

เครื่องมือหลักสองอย่าง

CSS	Figma เทียบเท่า	เหมาะสำหรับ
Flexbox	Auto Layout	จัดเรียงไอเทมในแถวหรือคอลัมน์เดียว
CSS Grid	Layout Grid	สร้าง layout สองมิติ (แถวและคอลัมน์พร้อมกัน)

คิดว่า Flexbox คือเครื่องมือที่ใช้เมื่อต้องการจัดไอเทมในแนวเส้น เช่น navigation bar แถวของการ์ด หรือปุ่มที่อยู่ตรงกลาง ส่วน CSS Grid ใช้สำหรับโครงสร้างหน้าโดยรวม เช่น headers, sidebars, เนื้อหาหลัก, footer

คุณจะใช้ทั้งสองอย่างตลอดเวลา UI จริงส่วนใหญ่ใช้ Grid สำหรับโครงสร้างภาพรวม และ Flexbox สำหรับ layout ของคอมโพเนนต์ย่อยในแต่ละส่วน

เห็น layout ในการทำงาน

ด้านล่างมีกล่องสามอัน ตอนนี้กล่องทั้งสามเรียงซ้อนกันในแนวตั้งเพราะนั่นคือวิธีที่ browser จัดวาง block elements โดยค่าเริ่มต้น ลองเปลี่ยน display: block เป็น display: flex ในแผง CSS แล้วดูว่าเกิดอะไรขึ้น

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

ลอง display: flex — กล่องจะเรียงในแถว ลอง display: grid กับ grid-template-columns: repeat(3, 1fr) — กล่องจะอยู่ในกริดสามคอลัมน์ คุณเพิ่งใช้เครื่องมือ layout ที่สำคัญที่สุดสองอย่างใน CSS แล้ว

สิ่งที่คุณจะเรียนในโมดูลนี้

บทเรียน	สิ่งที่คุณจะทำได้
Display & Flow	เข้าใจว่า browser เรียง elements ตามค่าเริ่มต้นอย่างไร
Flexbox	จัดแถวและคอลัมน์ของคอมโพเนนต์ได้อย่างแม่นยำ
Grid	สร้าง layout สองมิติสำหรับทั้งหน้า
Positioning	ควบคุม elements ที่ออกนอก flow ปกติ
Spacing Systems	ใช้ spacing ที่สอดคล้องกันด้วยสเกลการออกแบบ

เมื่อจบแล้ว ทุก Figma auto-layout frame และ layout grid ที่คุณเคยสร้างจะมีการแปล CSS ตรงๆ ที่คุณสามารถเขียนจากความจำได้