CSS grid-template-areas — layout เป็น visual map

grid-template-areas ให้ตั้งชื่อ area แล้วกำหนด layout ด้วย ASCII art อ่านง่ายกว่า grid-column / grid-row มาก

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

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

ใช้ . สำหรับ cell ว่าง:

grid-template-areas:
  "logo  nav    nav"
  ".     main   aside"
  "foot  foot   foot";

Responsive ด้วย media query — แค่เปลี่ยน area map:

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

ข้อดีคือ structure ชัดเจนมากตอนอ่าน code — เห็น layout ได้เลยโดยไม่ต้อง render ข้อจำกัด: area ต้องเป็น rectangle เท่านั้น ไม่รองรับ L-shape