पैनकेक स्टैक

डिकंस्ट्रक्ट किए गए पैनकेक के उलट, यह उदाहरण स्क्रीन का साइज़ बदलने पर अपने बच्चों को रैप नहीं करता है. आम तौर पर, इसे स्टिकी फ़ुटर कहा जाता है. इस लेआउट का इस्तेमाल वेबसाइटों और ऐप्लिकेशन, दोनों के लिए मोबाइल ऐप्लिकेशन (फ़ुटर आम तौर पर एक टूलबार होता है) और वेबसाइटों के लिए किया जाता है. खास तौर पर, एक पेज के ऐप्लिकेशन के लिए.

कॉम्पोनेंट में display: grid जोड़ने से, आपको एक कॉलम का ग्रिड मिलेगा. हालांकि, मुख्य एरिया सिर्फ़ उतना ही लंबा होगा जितना कि उसके नीचे फ़ुटर वाला कॉन्टेंट होगा.

फ़ुटर को सबसे नीचे चिपकाने के लिए, यह तरीका जोड़ें:

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

यह हेडर और फ़ुटर कॉन्टेंट को बच्चों के साइज़ के हिसाब से अपने-आप सेट हो जाता है. साथ ही, बची हुई जगह (1fr) को मुख्य एरिया में लागू कर देता है. वहीं, auto के साइज़ की लाइन में चाइल्ड कॉन्टेंट के लिए तय की गई कम से कम सीमा होती है. इससे कॉन्टेंट का साइज़ बढ़ने पर, पंक्ति अपने-आप अडजस्ट हो जाती है.

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

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

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