Grid

หัวข้อนี้คืออะไร

ในบทก่อนหน้าเราใช้ grid-area ทำให้ item กินพื้นที่หลายช่องได้ แต่เมื่อ layout เริ่มมี header, sidebar, main และ footer การจำเส้นหรือ span หลายตำแหน่งพร้อมกันจะอ่านยากขึ้น grid-template-areas คือ property ที่ให้คุณวาด "แผนผังชื่อพื้นที่" ไว้ที่ Grid Container แล้วให้ child แต่ละตัวใช้ grid-area เพื่อเข้าไปอยู่ในชื่อพื้นที่นั้น แนวคิดสำคัญคือ parent บอกว่า layout มีพื้นที่ชื่ออะไรอยู่ตรงไหน ส่วน child บอกว่า "ฉันคือพื้นที่ชื่อนั้น"

• grid-template-areas กำหนดที่ Grid Container หรือ parent
• grid-area แบบชื่อกำหนดที่ Grid Item หรือ child
• ชื่อใน grid-area ต้องตรงกับชื่อใน grid-template-areas
• เหมาะกับ page layout ที่มีส่วนชัดเจน เช่น header, sidebar, main, footer
• เปลี่ยนโครง layout ได้โดยแก้แผนผังที่ parent เป็นหลัก

ภาพจำ: แผนผังห้อง

ลองนึกถึงแปลนบ้าน ห้องแต่ละห้องมีชื่อ เช่น kitchen, bedroom, living แปลนบ้านบอกว่าห้องไหนอยู่ตรงไหน ส่วนของจริงแต่ละห้องติดป้ายชื่อของตัวเองไว้ ถ้าป้ายชื่อ "kitchen" ตรงกับช่อง kitchen ในแปลน ห้องนั้นก็ถูกวางในตำแหน่งที่ถูกต้อง CSS Grid ทำงานคล้ายกัน: - grid-template-areas คือแปลนบ้านที่ container - grid-area คือป้ายชื่อของ child - browser เอาชื่อสองฝั่งมา match กัน แล้ววาง item ลงในพื้นที่ที่กำหนด

grid-template-areas วาดแผนผังที่ parent | grid-area ของ child ต้องใช้ชื่อเดียวกัน

ขยายภาพแผนผัง

กฎที่ต้องจำ

รูปแบบพื้นฐานคือเขียนแต่ละแถวของ layout เป็น string หนึ่งบรรทัด จำนวนคำในแต่ละ string ต้องสัมพันธ์กับจำนวนคอลัมน์ที่กำหนดไว้

.layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 12px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

การทำงานทีละขั้นตอน

• 1. สร้าง Grid Container ด้วย display: grid
• 2. กำหนดจำนวนคอลัมน์และแถวด้วย grid-template-columns / grid-template-rows
• 3. เขียน grid-template-areas เป็นแผนผังชื่อพื้นที่ทีละแถว
• 4. ใส่ grid-area ให้ child แต่ละตัวโดยใช้ชื่อที่ตรงกับแผนผัง
• 5. ปรับ layout โดยแก้ string ใน grid-template-areas ก่อนแตะ HTML

ตัวอย่างลองเล่น: dashboard layout

จุดที่ผู้เริ่มต้นมักสับสน

• ใส่ grid-template-areas ที่ child จะไม่มีผล เพราะ property นี้เป็นแผนผังของ container
• ลืมใส่ grid-area ให้ child ทำให้ child ยังวางตามลำดับอัตโนมัติ
• สะกดชื่อไม่ตรงกัน เช่น template ใช้ main แต่ child ใช้ content
• ทำพื้นที่ชื่อเดียวกันให้ไม่เป็นสี่เหลี่ยม เช่น header อยู่ซ้ายบนและขวาล่างคนละก้อน
• ใช้ named areas กับ layout เล็กเกินไปทั้งที่ grid-column หรือ grid-row อ่านง่ายกว่า

สรุปท้ายบท

จำง่าย ๆ แบบนี้: "grid-template-areas = แผนผังชื่อพื้นที่ที่ parent" "grid-area = ป้ายชื่อของ child ที่บอกว่าจะไปอยู่พื้นที่ไหน"

• ใช้ grid-template-areas เมื่อ layout มีพื้นที่ชัดเจนหลายส่วน
• ชื่อ area ใน parent และ child ต้องตรงกัน
• พื้นที่ชื่อเดียวกันต้องต่อกันเป็นรูปสี่เหลี่ยม
• ใช้ . เพื่อเว้น cell ที่ไม่ต้องการ named area
• เหมาะมากกับ page layout เพราะอ่านโครงหน้าได้จาก CSS ทันที

Lab 1: สร้าง layout ด้วย named areas

ชื่อ Lab: Dashboard named areas เป้าหมาย: ใช้ grid-template-areas สร้าง layout ที่มี header เต็มแถว, sidebar ซ้าย, main ขวา และ footer เต็มแถว โจทย์: .dashboard เปิด display: grid และกำหนดคอลัมน์ไว้แล้ว แต่ยังไม่มีแผนผังชื่อพื้นที่ เพิ่ม grid-template-areas ให้ .dashboard และเพิ่ม grid-area ให้ .header, .sidebar, .main, .footer เงื่อนไข: - .dashboard ต้องมี grid-template-areas - .header ต้องใช้ grid-area: header - .sidebar ต้องใช้ grid-area: sidebar - .main ต้องใช้ grid-area: main - .footer ต้องใช้ grid-area: footer แนวทางการคิด: parent วาดแผนผังชื่อพื้นที่ก่อน แล้ว child แต่ละตัวติดป้ายชื่อให้ตรงกับแผนผัง

Lab 2: สลับ layout โดยไม่แก้ HTML

ชื่อ Lab: ย้าย sidebar ไปด้านขวา เป้าหมาย: แก้แผนผังใน grid-template-areas เพื่อให้ main อยู่ซ้ายและ sidebar อยู่ขวา โดยไม่แก้ HTML โจทย์: ตอนนี้ layout วาง sidebar อยู่ซ้ายและ main อยู่ขวา ให้แก้เฉพาะแผนผัง named areas เพื่อสลับเป็น main ซ้าย, sidebar ขวา เงื่อนไข: - ต้องยังใช้ grid-template-areas ที่ .dashboard - ต้องยังใช้ grid-area ให้ child ทั้ง 4 ส่วน - ห้ามแก้ HTML แนวทางการคิด: ถ้า child มีป้ายชื่อถูกแล้ว การย้ายตำแหน่งควรทำที่แผนผังของ parent