กองแพนเค้ก

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

การเพิ่ม display: grid ลงในคอมโพเนนต์จะทำให้มีตารางกริดเพียงคอลัมน์เดียว แต่พื้นที่หลักจะมีความสูงเท่ากับเนื้อหาที่มีส่วนท้ายเท่านั้น

หากต้องการทำให้ส่วนท้ายติดอยู่ด้านล่าง ให้เพิ่มค่าต่อไปนี้

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

การดำเนินการนี้จะตั้งค่าเนื้อหาส่วนหัวและส่วนท้ายให้ปรับขนาดรายการย่อยโดยอัตโนมัติ และใช้พื้นที่ที่เหลือ (1fr) กับพื้นที่หลัก ส่วนแถวที่มีขนาด auto จะแบ่งขนาดเนื้อหาขั้นต่ำเป็นหน่วยย่อย ดังนั้นเมื่อเนื้อหามีขนาดใหญ่ขึ้น แถวจะมีขนาดเพิ่มขึ้นเพื่อปรับขนาด

HTML

<div class="parent">
  <header class="section yellow">Header</header>
  <main class="section blue">Main</main>
  <footer class="section green">Footer Content</footer>
</div>

CSS

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

  /* Just for parent demo size */
  height: 100vh;
}