پشته پنکیک

برخلاف پنکیک تخریب‌شده ، این مثال وقتی اندازه صفحه نمایش تغییر می‌کند، فرزندان خود را نمی‌پیچد. این طرح‌بندی که معمولاً به عنوان پاورقی چسبنده نامیده می‌شود، هم برای وب‌سایت‌ها و برنامه‌ها، هم برای برنامه‌های تلفن همراه (پانویس معمولاً یک نوار ابزار است) و هم برای وب‌سایت‌ها - به‌ویژه برنامه‌های تک صفحه‌ای استفاده می‌شود.

افزودن 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;
}