প্যানকেক স্ট্যাক

ডিকনস্ট্রাক্ট প্যানকেকের বিপরীতে, পর্দার আকার পরিবর্তন হলে এই উদাহরণটি তার বাচ্চাদের আবৃত করে না। সাধারণত একটি স্টিকি ফুটার হিসাবে উল্লেখ করা হয়, এই লেআউটটি ওয়েবসাইট এবং অ্যাপ্লিকেশন উভয়ের জন্যই ব্যবহৃত হয়, মোবাইল অ্যাপ্লিকেশন জুড়ে (ফুটারটি সাধারণত একটি টুলবার), এবং ওয়েবসাইটগুলি - বিশেষ একক পৃষ্ঠার অ্যাপ্লিকেশনগুলিতে৷

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