รูปแบบจอกศักดิ์สิทธิ์

สำหรับเลย์เอาต์ของสิ่งศักดิ์สิทธิ์แบบคลาสสิกนี้จะมีส่วนหัว ส่วนท้าย แถบด้านข้างทางซ้าย แถบด้านข้างทางขวา และเนื้อหาหลัก คล้ายกับเลย์เอาต์ก่อนหน้านี้ แต่มีแถบด้านข้างแล้ว

หากต้องการเขียนตารางกริดทั้งหมดนี้โดยใช้โค้ดบรรทัดเดียว ให้ใช้พร็อพเพอร์ตี้ grid-template ซึ่งจะช่วยให้คุณตั้งค่าทั้งแถวและคอลัมน์ได้พร้อมกัน

พร็อพเพอร์ตี้และค่าคู่คือ grid-template: auto 1fr auto / auto 1fr auto เครื่องหมายทับระหว่างรายการที่คั่นด้วยเว้นวรรคลำดับแรกและรายการที่ 2 จะเป็นการแบ่งระหว่างแถวและคอลัมน์

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

ดังเช่นในตัวอย่างสุดท้าย ที่ส่วนหัวและส่วนท้ายมีเนื้อหาที่กำหนดขนาดอัตโนมัติตรงนี้ แถบด้านข้างทางซ้ายและขวาจะมีการปรับขนาดโดยอัตโนมัติตามขนาดที่แท้จริงของบุตรหลาน แต่คราวนี้กลายเป็นขนาดแนวนอน (width) แทนที่จะเป็นแนวตั้ง (height)

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}