grid-template-areas และ grids ที่ตอบสนองต่อการเปลี่ยนแปลงทำงานอย่างไร

Question

Accepted Answer

`grid-template-areas` ช่วยให้คุณจัดวางตาราข่าย **ด้วยสายตา** โดยการตั้งชื่อพื้นที่ ทำให้เลआউต์หน้าที่ซับซ้อนสามารถอ่านได้ง่ายและจัดเรียงใหม่ได้ตอบสนองต่อการเปลี่ยนแปลง

## การกำหนดพื้นที่ที่มีชื่อ

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ศิลปะ ASCII `grid-template-areas` *คือ* เลआউต์ — คุณสามารถเห็นโครงสร้างได้ในลักษณะทันที และการทำซ้ำชื่อจะทำให้พื้นที่ขยายไปยังเซลล์

## จัดเรียงใหม่สำหรับมือถือ — วาดแผนที่ใหม่

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

เพื่อเปลี่ยนเลออตทั้งหมดสำหรับมือถือ คุณเพียงแค่เขียนแผนที่พื้นที่ใหม่ — HTML และการกำหนด `grid-area` ยังคงเหมือนเดิม นี่깔สะอาดกว่าการเปลี่ยนตำแหน่งแต่ละองค์ประกอบ

## ทำไมสิ่งนี้จึงมีประสิทธิpower

- **เอกสารในตัวเอง** — CSS สะท้อนเลอ layout ที่แสดงผลได้ด้วยสายตา
- **แยกออกจากลำดับแหล่งที่มา** — องค์ประกอบสามารถวางได้ที่ใดก็ได้โดยไม่คำนึงถึงลำดับ HTML (ดีสำหรับการวาง `main` ก่อนใน DOM เพื่อการเข้าถึง แต่แสดง sidebar ก่อนด้วยสายตา)
- **การไหลซ้ำที่ตอบสนองได้ง่าย** — สลับเทมเพลตพื้นที่สำหรับแต่ละจุดแบ่ง

## เหตุใดจึงมีความสำคัญ

พื้นที่ตาราข่ายที่มีชื่อทำให้เลอ layout ระดับหน้า (ส่วนหัว/ด้านข้าง/หลัก/ส่วนท้าย) อ่านได้และตอบสนองได้อย่างปกติ — การปรับโครงสร้างใหม่เป็นเรื่องของการแก้ไขแผนที่ ASCII ไม่ใช่การปล่อยพื้นที่ใหม่

นี่เป็นหนึ่งในเทคนิค layout ที่ชัดเจนและจดรักษาได้มากที่สุดที่ CSS นำเสนอ