การกำหนดพื้นที่ใน Grid Layout ด้วย grid-template-areas

คุณสมบัติ grid-template-areas ใช้กำหนด layout ของ CSS Grid โดยใช้ชื่อพื้นที่ (named areas) ทำให้โค้ดอ่านง่ายและจินตนาการ layout ได้ง่าย

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { grid-area: newArea; }
    .grid-container {
      display: grid;
      grid-template-areas: 
        'newArea newArea . . .'
        'newArea newArea . . .';
      grid-gap: 5px;
      background-color: blue;
      padding: 5px;
    }
    .grid-container > div {
      background-color: orange;
      text-align: center;
      padding: 5px 0;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>Heading One</h1>
  <p>Set some random numbers</p>
  <div class="grid-container">
    <div class="demo">250</div>
    <div class="item2">120</div>
    <div class="item3">333</div>
    <div class="item4">298</div>
    <div class="item5">645</div>
    <div class="item6">543</div>
    <div class="item7">555</div>
  </div>
</body>
</html>

คำอธิบาย: grid-template-areas กำหนด grid 2 แถว 5 คอลัมน์ พื้นที่ "newArea" ครอบ 2x2 เซลล์ (ซ้ายบน) ไอเท็ม .demo จะครอบพื้นที่นั้น ส่วนไอเท็มอื่นๆ จะถูก auto-place ในช่องว่าง (.) ตามลำดับ

กฎของ grid-template-areas:

• แต่ละแถวต้องมีจำนวนคอลัมน์เท่ากัน
• ใช้ . (dot) สำหรับช่องว่าง (empty cell)
• ชื่อพื้นที่ต้องเป็น rectangle (สี่เหลี่ยม) ไม่รองรับ L-shape
• ชื่อพื้นที่ซ้ำได้ (จะรวมเป็นพื้นที่เดียว)

การประยุกต์: สร้าง layout หน้าเว็บ (header, sidebar, main, footer) แบบ responsive ด้วย media queries เปลี่ยน template areas ได้ง่าย