ערימת פנקייקים

בשונה מהפנקייק הדקורטיבי, הדוגמה הזו לא עוטפת את הילדים כשגודל המסך משתנה. פריסה זו, שלרוב נקראת כותרת תחתונה במיקום קבוע. היא משמשת גם לאתרים וגם לאפליקציות, באפליקציות לנייד (הכותרת התחתונה היא בדרך כלל סרגל כלים) ובאתרים – ובמיוחד באפליקציות של דף יחיד.

הוספת 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;
}