كومة فطيرة محلاة

على عكس الفطيرة المفكوكة، لا يشمل هذا المثال عناصره الثانوية عندما يتغيّر حجم الشاشة. يُشار إليه عادةً باسم التذييل الثابت، ويتم استخدام هذا التنسيق لكل من المواقع الإلكترونية والتطبيقات، وفي جميع تطبيقات الأجهزة الجوّالة (يكون التذييل عادةً شريط أدوات) والمواقع الإلكترونية، ولا سيما تطبيقات الصفحة الواحدة.

بإضافة 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;
}