การตั้งชื่อพื้นที่ Grid Items ด้วย CSS

ใน CSS Grid Layout สามารถตั้งชื่อพื้นที่ (named grid areas) ได้โดยใช้คุณสมบัติ grid-template-areas บน container และ grid-area บน items เพื่อจัดวาง layout อย่างชัดเจนและอ่านง่าย

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: green;
      grid-template-areas: 
        'demo demo . . .'
        'demo demo . . .';
      padding: 20px;
      grid-gap: 10px;
    }
    .container > div {
      background-color: orange;
      text-align: center;
      padding: 10px 0;
      font-size: 20px;
    }
    .ele1 {
      grid-area: demo;
    }
  </style>
</head>
<body>
  <h1>Game Board</h1>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

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

ข้อดี: ทำให้โค้ดอ่านง่าย แก้ไข layout ได้โดยเปลี่ยนแค่ template string ไม่ต้องคำนวณ line numbers