การสร้าง responsive grid เป็นทักษะจำเป็นสำหรับ web developer
ไม่ว่าจะเป็น portfolio ช่างภาพ, อีคอมเมิร์ซ, หรือ landing page — ทุกอย่างพัฒนาจาก grid layout Grids ไปทั่วทั้งเว็บ
ถ้ารู้สร้าง responsive grid ที่ดี — คุณจะโดดเด่นในฐานะ front-end developer ทันที
Grid Layout คืออะไร?
Grid = วิธีจัดระเบียบ elements ทางสายตา ที่ใช้มาตั้งแต่ยุคหนังสือพิมพ์/โฆษณาพิมพ์
Grid สร้าง composition ที่สวยง่าย เข้าใจง่าย สิ่งที่ควรใช้ในเว็บไซต์
Grid แบ่งพื้นที่เป็นคอลัมน์ ระหว่างคอลัมน์มี gutter (ช่องว่าง)
มักใช้ 12 คอลัมน์ เพราะหารด้วย 2 และ 3 ลงตัว — คอลัมน์ไม่ต้องกว้างเท่ากัน บางอันกว้าง 2, 4, 6 คอลัมน์ — สำคัญคือทุก element เริ่ม/จบที่เส้นคอลัมน์
ยังแบ่งแนวตั้งเป็น zones ได้ — แต่ละโซนผสมผสานความกว้างคอลัมน์ต่างกัน
วิธีสร้าง Responsive Grid
近年 flexbox และ CSS Grid Layout ได้รับความนิยม
ก่อนหน้านี้ใช้ CSS float property — สร้าง floated columns + percentage widths + media queries
(ก่อน float ใช้ HTML tables เท่านั้น — ไม่พูดถึงมันละกัน 😉)
ตอนเรียนรู้ ใช้ responsive framework (Zurb Foundation, Bootstrap) — ประหยัดเวลามาก!
แต่พึ่งพา framework มากเกินไปโดยไม่เข้าใจ mechanism ใต้โฮด — ไม่ดี ลองเข้าใจ scaffolding ภายใน — จะทำให้คุณเป็น developer ที่ดีกว่า
Mini Project: Grid 2 คอลัมน์ 3 วิธี
สร้าง grid 2 คอลัมน์ (main content + sidebar) ด้วย 3 วิธี: float, flexbox, CSS Grid
วางแผน Grid
เขียนโน้ตการเปลี่ยนแปลง responsive:
- Mobile: คอลัมน์ซ้อนกัน Main บน Sidebar ล่าง ทั้งคู่ 100% width
- Tablet: ติดกัน Side-by-side ทั้งคู่ 50% width
- Desktop: Main 2/3 width, Sidebar 1/3 width
1. Float Grid
ยังครอบคลุม float เพราะอาจต้องใช้กับ IE เก่า
float เดิมตั้งใจให้ text รอบรูปภาพ float: left จัดชิดซ้าย parent
สร้าง Grid ด้วย Float
.column { display: block; float: left; }ปัญหา: float นำ element ออกจาก normal flow — parent div คollapse ความสูงเหมือนไม่มี children
แก้: 1) display: table บน parent หรือ 2) clearfix pseudo-element:
.parent:after { clear: both; content: ""; display: block; }ต้อง box-sizing: border-box ทุก element (รวม padding/margin ใน width/height)
Media Queries ทำ Responsive
Mobile-first: default ทั้งคู่ 100%
.column { display: block; width: 100%; }Tablet (641px+): float left + 50%
@media only screen and (min-width: 641px){ .column { width: 50%; float: left; } }Desktop (1025px+): Main 66.66%, Sidebar 33.33%
@media only screen and (min-width: 1025px){ .main { width: 66.66%; } .sidebar { width: 33.33%; } }Float grid ทำงานได้ แต่วิธี hacky — flexbox จะ intuitive กว่า
2. Flexbox Grid
HTML เหมือนเดิม: parent + 2 child columns
ประกาศ parent ใช้ flexbox: .parent { display: flex; }
ตั้งค่า column: .column { flex: 1; } — flex:1 = แบ่งพื้นที่เท่าๆ กัน (ratio)
อยากให้คอลัมน์แรกกว้าง 2 เท่า: flex:2 vs flex:1
Flexbox อัจฉริยะ แบ่งพื้นที่อัตโนมัติ ไม่ว่า columns กี่ตัว — CSS น้อยกว่า float มาก
สร้าง Flex Grid Responsive
Mobile: ไม่ต้อง flexbox — columns เป็น block 100% width เอง
Tablet (641px+): เปิด flexbox + flex:1 ทั้งคู่
@media only screen and (min-width: 641px){ .parent { display: flex; } .column { flex: 1; } }Desktop (1025px+): Main flex:2, Sidebar flex:1 (ตั้งค่าที่ tablet แล้ว)
@media only screen and (min-width: 1025px){ .main { flex: 2; } }Main = 2/3, Sidebar = 1/3
Flexbox อันทรงพลังและเข้าใจง่าย
CSS น้อยมาก Grid เหมือน float — Flexbox just works เข้าใจง่าย
หลังต่อสู้กับ float หลายปี ไม่เชื่อว่าง่ายขนาดนี้
Flexbox มี advanced properties:
- จัด alignment แนวนอน/แนวตั้ง (vertical จริงๆ!)
- จัด center หรือกระจายขอบ
- เปลี่ยนลำดับ items ตาม breakpoint
3. CSS Grid Layout
CSS Grid = วิธีล่าสุด คล้าย flexbox แตกต่างมาก
Rachel Andrew (CSS Grid expert) กล่าว:
- Flexbox: จัดเรียง 1 ทิศทาง (row หรือ column)
- CSS Grid: จัดเรียง 2 มิติ (rows และ columns พร้อมกัน)
Grid เหมาะกับ layout เว็บทั่วไป (header, footer, content, sidebar) กว่า flexbox
ข้อจำกัด: browser support ยังไม่ครบ — Chromeเก่า, iOS Safariเก่า, Androidเก่า ไม่รองรับ IE/Edge spotty
ทางออก: 1) ใช้ Grid + CSS fallbacks สำหรับ browser ไม่รองรับ 2) ใช้ flexbox รอ support ดีกว่า
CSS Grid ทำงานยังไง?
ตั้งค่า parent: display: grid
ต่างจาก flexbox: ตั้งค่า grid template บน parent (ไม่ใช่ child)
grid-template-columns กำหนดจำนวน/ขนาดคอลัมน์ grid-template-rows สำหรับแถว
Grid 2 คอลัมน์:
.parent { display: grid; grid-template-columns: 1fr 1fr; }fr คืออะไร?
fr = fraction หน่วยใหม่ = ส่วนของพื้นที่ว่างที่แต่ละ item ใช้ — คล้าย flex number (relative width)
สร้าง CSS Grid Responsive
Mobile: ไม่ตั้ง grid styles — columns ซ้อนกันเอง
Tablet: 2 คอลัมน์เท่ากัน
.parent { display: grid; grid-template-columns: 1fr 1fr; }Desktop (1025px+): Main 2fr, Sidebar 1fr = 2/3 และ 1/3
@media only screen and (min-width: 1025px){ .parent { grid-template-columns: 2fr 1fr; } }สะดวกมาก: ตั้งแค่ parent ไม่ต้องตั้ง child elements
CSS Grid อันทรงพลังมาก
ทำ layout ซับซ้อนได้: ความกว้าง/สูง/การจัดต่างๆ มากกว่านี้มาก — ผมเพิ่งขูดผิวขึง
อ่านเพิ่ม: Grid by Example (Rachel Andrew), "Basic concepts of grid layout" (Mozilla)
สรุป: วิธีไหนดีที่สุด?
ส่วนตัวคิดว่า Flexbox เป็นตัวเลือกที่ดีที่สุดตอนนี้ — browser support ดี พอใช้งานได้จริง ไม่ถูกแทนที่โดย CSS Grid เพราะมีจุดแข็งเฉพาะตัว (ทำงานร่วมกันได้ดี)
CSS Grid กำลังขยาย support — เริ่มเรียนตอนนี้ดีกว่า ไม่นานจะกลายเป็น industry standard
คุณชอบวิธีไหน? ค้างที่ flexbox หรือ CSS Grid แจ้งได้ในคอมเมนต์ครับ!
