פריסת הגביע הקדוש

לפריסה הקלאסית הזו של אפרפר קדוש אפשר להוסיף כותרת עליונה, כותרת תחתונה, סרגל צד שמאלי, סרגל צד שמאלי ותוכן ראשי. היא דומה לפריסה הקודמת, אבל עכשיו היא כוללת סרגלי צד!

כדי לכתוב את כל הרשת באמצעות שורת קוד אחת, צריך להשתמש במאפיין grid-template. כך אפשר להגדיר גם את השורות וגם את העמודות בו-זמנית.

צמד המאפיין והערך: grid-template: auto 1fr auto / auto 1fr auto. הקו הנטוי בין הרשימה הראשונה והשנייה שמופרדים ברווחים הוא המעבר בין השורות לעמודות.

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

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

HTML

<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>

CSS

        .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;
}